archetype-theme 1.0.0.alpha.1

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_closes.scss

@@ -0,0 +1,56 @@
+// ==========
+// CLOSES
+// ==========
+$STYLEGUIDE_CLOSES_ID: close !default;
+$STYLEGUIDE_CLOSES: () !default;
+
+@if should-register-component($STYLEGUIDE_CLOSES_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_CLOSES_ID,  $STYLEGUIDE_CLOSES, (
+  default: (
+    color:                inherit,
+    background:           transparent none,
+    padding:              0 1px 0 0,
+    border:               0,
+    margin:               0,
+    cursor:               pointer,
+    text-decoration:      none,
+    position:             absolute,
+    overflow:             hidden,
+    top:                  vertical-spacing(2),
+    right:                horizontal-spacing(2),
+    width:                nth($CONFIG_GLYPH_CLOSE, 4),
+    height:               nth($CONFIG_GLYPH_CLOSE, 4),
+    text-indent:          nth($CONFIG_GLYPH_CLOSE, 4) + 1px,
+    glyph-icon:           (nth($CONFIG_GLYPH_CLOSE, 1), nth($CONFIG_GLYPH_CLOSE, 2), nth($CONFIG_GLYPH_CLOSE, 3), before),
+    selectors: (
+      $CORE_GLYPH_SELECTOR_VAR: (
+        vertical-align:   top,
+        line-height:      1,
+        position:         absolute,
+        top:              0,
+        right:            0,
+        text-decoration:  none,
+        cursor:           pointer
+      )
+    ),
+    states: (
+      hover: (
+        text-shadow:      $CONFIG_SHADOW_CLOSES
+      )
+    )
+  ),
+  in a $STYLEGUIDE_ALERTS_ID: (
+    color:                nth($CONFIG_COLOR_COPY, 2)
+  ),
+  in dialog: (
+    color:                nth($CONFIG_COLOR_COPY, 2),
+    opacity:              0.7,
+    top:                  vertical-spacing(2.6, $abuse: true),
+    states: (
+      hover: (
+        opacity:          1
+      )
+    )
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_container.scss

@@ -0,0 +1,23 @@
+// ==========
+// CONTAINER
+// ==========
+$STYLEGUIDE_CONTAINERS_ID: container !default;
+$STYLEGUIDE_CONTAINERS: () !default;
+
+@if should-register-component($STYLEGUIDE_CONTAINERS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_CONTAINERS_ID,  $STYLEGUIDE_CONTAINERS, (
+  default: (
+    background:         nth($CONFIG_TEXTURE_CONTAINER, 1),
+    box-shadow:         $CONFIG_SHADOW_CONTAINER,
+    target-browser:     $CONFIG_SHADOW_CONTAINER_ALT   // simulate the shadow in IE<9
+  ),
+  light: null, // inherit the default
+  dark: (
+    background:         nth($CONFIG_TEXTURE_CONTAINER, 2)
+  ),
+  without shadow: (
+    box-shadow:         null,
+    target-browser:     null
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_copy.scss

@@ -0,0 +1,72 @@
+// ==========
+// COPY
+// ==========
+$STYLEGUIDE_COPY_ID: copy !default;
+$STYLEGUIDE_COPY: () !default;
+
+@if should-register-component($STYLEGUIDE_COPY_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_COPY_ID,  $STYLEGUIDE_COPY, (
+  default: (
+    font-size:            nth($CONFIG_FONT_COPY_MEDIUM, 1),
+    line-height:          nth-cyclic($CONFIG_FONT_COPY_MEDIUM, 2),
+    color:                nth($CONFIG_COLOR_COPY, 1),
+    font-weight:          normal
+  ),
+  // sizes
+  medium: null, // inherit the default
+  large: (
+    font-size:            nth($CONFIG_FONT_COPY_LARGE, 1),
+    line-height:          nth-cyclic($CONFIG_FONT_COPY_LARGE, 2)
+  ),
+  small: (
+    font-size:            nth($CONFIG_FONT_COPY_SMALL, 1),
+    line-height:          nth-cyclic($CONFIG_FONT_COPY_SMALL, 2)
+  ),
+  // contexts
+  in dark: (
+    color:                nth-cyclic($CONFIG_COLOR_COPY, 2)
+  ),
+  in $STYLEGUIDE_MODULES_ID: (
+    color:                nth($CONFIG_COLOR_COPY, 1)
+  ),
+  in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:              in dark
+  ),
+  in a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:              in dark
+  ),
+  in a $STYLEGUIDE_ALERTS_ID: (
+    inherit:              in dark
+  ),
+  in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:              in dark,
+    text-shadow:          nth-cyclic($CONFIG_SHADOW_COPY, 2)
+  ),
+  breadcrumb: (
+    color:                nth($CONFIG_COLOR_BREADCRUMB, 1),
+    font-size:            nth($CONFIG_FONT_BREADCRUMB, 1),
+    font-weight:          $CONFIG_FONT_WEIGHT_BREADCRUMB,
+    text-decoration:      nth($CONFIG_DECORATION_LINK, 1),
+    text-shadow:          $CONFIG_SHADOW_BREADCRUMB
+  ),
+  active breadcrumb: (
+    color:                nth($CONFIG_COLOR_BREADCRUMB_ACTIVE, 1),
+    font-size:            nth($CONFIG_FONT_BREADCRUMB, 1),
+    font-weight:          $CONFIG_FONT_WEIGHT_BREADCRUMB,
+    text-shadow:          $CONFIG_SHADOW_BREADCRUMB,
+    border-left:          ($CONFIG_DIM_GENERIC_BORDER solid $CONFIG_COLOR_BREADCRUMB),
+    margin:               $CONFIG_DIM_BREADCRUMB_SPACING_OUTER,
+    padding:              $CONFIG_DIM_BREADCRUMB_SPACING
+  ),
+  emphasized: (
+    font-style:           italic
+  ),
+  strong: (
+    font-weight:          bold
+  ),
+  // muted colors
+  muted: (
+    color:                nth($CONFIG_COLOR_COPY_MUTED, 1)
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_flyouts.scss

@@ -0,0 +1,50 @@
+// ==========
+// FLYOUT MENUS
+// ==========
+$STYLEGUIDE_FLYOUTS_ID: flyout !default;
+$STYLEGUIDE_FLYOUTS: () !default;
+
+@if should-register-component($STYLEGUIDE_FLYOUTS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_FLYOUTS_ID,  $STYLEGUIDE_FLYOUTS, (
+  default: (
+    display:                none,                         // hidden by default (use `visible flyout` if you want it shown by default)
+    position:               absolute,                     // position!
+    top:                    100%,                         // align it to the bottom of the context
+    left:                   0,                            // align left
+    z-index:                1,
+    border:                 $CONFIG_DIM_GENERIC_BORDER solid nth($CONFIG_COLOR_BORDER_FLYOUT,1),
+    background:             nth($CONFIG_TEXTURE_CONTAINER, 1),
+    box-shadow:             $CONFIG_SHADOW_FLYOUT,
+    padding:                $CONFIG_DIM_FLYOUT_SPACING,
+    min-width:              $CONFIG_DIM_FLYOUT_MIN_WIDTH,
+    cursor:                 default,
+    float:                  left,
+    list-style:             none                          // just incase its a list
+  ),
+  visible: (
+    display:                block
+  ),
+  in $STYLEGUIDE_BUTTONS_ID: (
+    // restore some things used for buttons
+    font-weight:            normal,
+    white-space:            normal,
+    text-shadow:            none,
+    // no box-shadow
+    box-shadow:             null,
+    // thick borders!
+    border-width:           $CONFIG_DIM_GENERIC_BORDER_THICK,
+    border-radius:          $CONFIG_DIM_FLYOUT_RADIUS
+  ),
+  in $STYLEGUIDE_BUTTON_GROUPS_ID: (
+    inherit:                in $STYLEGUIDE_BUTTONS_ID
+  ),
+  upward: (
+    top:                    null,
+    bottom:                 100%
+  ),
+  right aligned: (
+    left:                   null,
+    right:                  0
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_headings.scss

@@ -0,0 +1,29 @@
+// ==========
+// HEADINGS
+// ==========
+$STYLEGUIDE_HEADINGS_ID: heading !default;
+$STYLEGUIDE_HEADINGS: () !default;
+
+@if should-register-component($STYLEGUIDE_HEADINGS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_HEADINGS_ID, $STYLEGUIDE_HEADINGS, (
+  default: null,
+  in $STYLEGUIDE_FLYOUTS_ID in $STYLEGUIDE_BUTTON_GROUPS_ID: (
+    margin:                 $CONFIG_DIM_HEADING_SPACING_OUTER,
+    padding:                $CONFIG_DIM_HEADING_SPACING,
+    background-color:       $CONFIG_TEXTURE_HEADING,
+    border:                 $CONFIG_DIM_GENERIC_BORDER solid nth($CONFIG_COLOR_BORDER_SECTION,1),
+    border-width:           $CONFIG_DIM_GENERIC_BORDER 0,
+    color:                  nth($CONFIG_COLOR_COPY_MUTED, 1)
+  ),
+  first in $STYLEGUIDE_FLYOUTS_ID in $STYLEGUIDE_BUTTON_GROUPS_ID: (
+    margin-top:             0,
+    border-top-width:       0
+  ),
+  in $STYLEGUIDE_FLYOUTS_ID in $STYLEGUIDE_BUTTONS_ID: (
+    inherit:                in $STYLEGUIDE_FLYOUTS_ID in $STYLEGUIDE_BUTTON_GROUPS_ID
+  ),
+  first in $STYLEGUIDE_FLYOUTS_ID in $STYLEGUIDE_BUTTONS_ID: (
+    inherit:                first in $STYLEGUIDE_FLYOUTS_ID in $STYLEGUIDE_BUTTON_GROUPS_ID
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_headlines.scss

@@ -0,0 +1,57 @@
+// ==========
+// HEADLINES
+// ==========
+$STYLEGUIDE_HEADLINES_ID: headline !default;
+$STYLEGUIDE_HEADLINES: () !default;
+
+@if should-register-component($STYLEGUIDE_HEADLINES_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_HEADLINES_ID,  $STYLEGUIDE_HEADLINES, (
+  default: (
+    font-family:          headline,
+    font-size:            nth($CONFIG_FONT_HEADLINE_LARGE, 1),
+    font-weight:          bold,
+    line-height:          nth-cyclic($CONFIG_FONT_HEADLINE_LARGE, 2),
+    color:                nth($CONFIG_COLOR_STRONG, 1)
+  ),
+  muted: (
+    font-weight:          normal
+  ),
+  xlarge: (
+    font-size:            nth($CONFIG_FONT_HEADLINE_XLARGE, 1),
+    line-height:          nth-cyclic($CONFIG_FONT_HEADLINE_XLARGE, 2)
+  ),
+  xxlarge: (
+    font-size:            nth($CONFIG_FONT_HEADLINE_XXLARGE, 1),
+    line-height:          nth-cyclic($CONFIG_FONT_HEADLINE_XXLARGE, 2)
+  ),
+  large: null,
+  medium: (
+    font-size:            nth($CONFIG_FONT_HEADLINE_MEDIUM, 1),
+    line-height:          nth-cyclic($CONFIG_FONT_HEADLINE_MEDIUM, 2)
+  ),
+  small: (
+    font-size:            nth($CONFIG_FONT_HEADLINE_SMALL, 1),
+    line-height:          nth-cyclic($CONFIG_FONT_HEADLINE_SMALL, 2)
+  ),
+  xsmall: (
+    font-size:            nth($CONFIG_FONT_HEADLINE_XSMALL, 1),
+    line-height:          nth-cyclic($CONFIG_FONT_HEADLINE_XSMALL, 2)
+  ),
+  in dark: (
+    color:                nth-cyclic($CONFIG_COLOR_STRONG, 2)
+  ),
+  in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:              in dark
+  ),
+  in a $STYLEGUIDE_TOOLTIPS_ID: (
+    inherit:              in dark
+  ),
+  in a $STYLEGUIDE_ALERTS_ID: (
+    inherit:              in dark
+  ),
+  in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:              in dark,
+    text-shadow:          nth-cyclic($CONFIG_SHADOW_COPY, 2)
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_hovercards.scss

@@ -0,0 +1,26 @@
+// ==========
+// HOVERCARDS
+// ==========
+$STYLEGUIDE_HOVERCARDS_ID: hovercard !default;
+$STYLEGUIDE_HOVERCARDS: () !default;
+
+@if should-register-component($STYLEGUIDE_HOVERCARDS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_HOVERCARDS_ID,  $STYLEGUIDE_HOVERCARDS, (
+  default: (
+    border-radius:        $CONFIG_DIM_HOVERCARD_RADIUS,
+    background:           nth($CONFIG_TEXTURE_CONTAINER, 1),
+    border-color:         nth($CONFIG_COLOR_BORDER_HOVERCARD, 1),
+    border-style:         solid,
+    border-width:         $CONFIG_DIM_GENERIC_BORDER,
+    box-shadow:           $CONFIG_SHADOW_HOVERCARD,
+    max-width:            $CONFIG_DIM_HOVERCARD_MAX_WIDTH,
+    padding:              $CONFIG_DIM_HOVERCARD_SPACING,
+    // structure
+    outline:              0,  // for accessibility purposes, we don't want to outline the hovercard if it has focus
+    display:              block,
+    position:             absolute,
+    visibility:           visible,
+    z-index:              1
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_icons.scss

@@ -0,0 +1,16 @@
+// ==========
+// ICONS
+// ==========
+$STYLEGUIDE_ICONS_ID: icon !default;
+$STYLEGUIDE_ICONS: () !default;
+
+@if should-register-component($STYLEGUIDE_ICONS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_ICONS_ID,  $STYLEGUIDE_ICONS, (
+  default: (
+    inline-block:         middle,
+    hide-text:            true,
+    content:              $CONTENT_PLACEHOLDER,
+    background:           none no-repeat scroll 0 0 transparent
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_identities.scss

@@ -0,0 +1,29 @@
+// ==========
+// IDENTITIES
+// ==========
+$STYLEGUIDE_IDENTITY_ID: identity !default;
+$STYLEGUIDE_IDENTITY: () !default;
+
+@if should-register-component($STYLEGUIDE_IDENTITY_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_IDENTITY_ID,  $STYLEGUIDE_IDENTITY, (
+  default: (
+    color:                    nth($CONFIG_COLOR_BRAND, 1),
+    font-weight:              bold,
+    text-decoration:          nth($CONFIG_DECORATION_IDENTITY, 1),
+    states: (
+      hover: (
+        text-decoration:      nth-cyclic($CONFIG_DECORATION_IDENTITY, 2)
+      )
+    )
+  ),
+  in dark: (
+    color:                    nth-cyclic($CONFIG_COLOR_BRAND, 2)
+  ),
+  in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:                  in dark
+  ),
+  in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:                  in dark
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_links.scss

@@ -0,0 +1,54 @@
+// ==========
+// LINKS
+// ==========
+$STYLEGUIDE_LINKS_ID: link !default;
+$STYLEGUIDE_LINKS: () !default;
+
+@if should-register-component($STYLEGUIDE_LINKS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_LINKS_ID,  $STYLEGUIDE_LINKS, (
+  default: (
+    color:                    nth($CONFIG_COLOR_BRAND, 1),
+    text-decoration:          nth($CONFIG_DECORATION_LINK, 1),
+    states: (
+       hover: (
+         text-decoration:     nth-cyclic($CONFIG_DECORATION_LINK, 2)
+      )
+    )
+  ),
+  without underline: (
+    states: (
+      hover: (
+        text-decoration:      none
+      )
+    )
+  ),
+  in dark: (
+    color:                    nth-cyclic($CONFIG_COLOR_BRAND, 2)
+  ),
+  in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:                  in dark
+  ),
+  in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:                  in dark
+  ),
+  in a $STYLEGUIDE_ALERTS_ID: (
+    color:                    nth-cyclic($CONFIG_COLOR_COPY, 2),
+    font-weight:              bold,
+    states: (
+      hover: (
+        color:                null
+      )
+    )
+  ),
+  muted: (
+    // de-emphasized links have no color until you hover over them
+    color:                    null,
+    states: (
+      hover: (
+        color:                nth($CONFIG_COLOR_BRAND, 1),
+        text-decoration:      none
+      )
+    )
+  )
+)) !global;
+}

data/Users/eoneill/workspace/archetype/extensions/archetype-theme/stylesheets/archetype/theme/components/_loaders.scss

@@ -0,0 +1,138 @@
+// ==========
+// LOADERS
+// ==========
+$STYLEGUIDE_LOADERS_ID: loader !default;
+$STYLEGUIDE_LOADERS: () !default;
+
+@if should-register-component($STYLEGUIDE_LOADERS_ID) {
+$a-blackhole: styleguide-add-component($STYLEGUIDE_LOADERS_ID, $STYLEGUIDE_LOADERS, (
+  default: (
+    display:              block,
+    content:              $CONTENT_PLACEHOLDER,
+    stretch:              true,
+    opacity:              0.7,
+    overflow:             hidden,
+    hide-text:            true,
+    background-color:     _styleguideGetContextColor(nth($CONFIG_TEXTURE_CONTAINER, 1)),
+    ie-pseudo-after:      _styleguideGetLoaderExpression(medium),
+    selectors: (
+      "&:after": (
+        position:               absolute,
+        top:                    50%,
+        left:                   50%,
+        content:                $CONTENT_PLACEHOLDER,
+        background-image:       -archetype-sprite-url($CONFIG_SPRITE_LOADERS),
+        background-repeat:      no-repeat,
+        background-position:    _styleguideGetLoaderPosition(medium, static),
+        width:                  _styleguideGetLoaderDimension(medium, static, width),
+        height:                 _styleguideGetLoaderDimension(medium, static, height),
+        margin-top:             _styleguideGetLoaderDimension(medium, static, height) / -2,
+        margin-left:            _styleguideGetLoaderDimension(medium, static, width) / -2,
+        animation:              _styleguideGetLoaderAnimation(medium)
+      )
+    )
+  ),
+  // sizes
+  large: (
+    ie-pseudo-after:      _styleguideGetLoaderExpression(large),
+    selectors: (
+      "&:after": (
+        background-position:    _styleguideGetLoaderPosition(large, static),
+        width:                  _styleguideGetLoaderDimension(large, static, width),
+        height:                 _styleguideGetLoaderDimension(large, static, height),
+        margin-top:             _styleguideGetLoaderDimension(large, static, height) / -2,
+        margin-left:            _styleguideGetLoaderDimension(large, static, width) / -2,
+        animation:              _styleguideGetLoaderAnimation(large)
+      )
+    )
+    // expression hack
+  ),
+  small: (
+    ie-pseudo-after:      _styleguideGetLoaderExpression(small),
+    selectors: (
+      "&:after": (
+        background-position:    _styleguideGetLoaderPosition(small, static),
+        width:                  _styleguideGetLoaderDimension(small, static, width),
+        height:                 _styleguideGetLoaderDimension(small, static, height),
+        margin-top:             _styleguideGetLoaderDimension(small, static, height) / -2,
+        margin-left:            _styleguideGetLoaderDimension(small, static, width) / -2,
+        animation:              _styleguideGetLoaderAnimation(small)
+      )
+    )
+    // expression hack
+  ),
+  // contexts
+  in dark: (
+    ie-pseudo-after:      _styleguideGetLoaderExpression(medium, 2),
+    selectors: (
+      "&:after": (
+        background-position:    _styleguideGetLoaderPosition(medium, static, 2),
+        width:                  _styleguideGetLoaderDimension(medium, static, width, 2),
+        height:                 _styleguideGetLoaderDimension(medium, static, height, 2),
+        margin-top:             _styleguideGetLoaderDimension(medium, static, height, 2) / -2,
+        margin-left:            _styleguideGetLoaderDimension(medium, static, width, 2) / -2,
+        animation:              _styleguideGetLoaderAnimation(medium, 2)
+      )
+    )
+  ),
+  large in dark: (
+    ie-pseudo-after:      _styleguideGetLoaderExpression(large, 2),
+    selectors: (
+      "&:after": (
+        background-position:    _styleguideGetLoaderPosition(large, static, 2),
+        width:                  _styleguideGetLoaderDimension(large, static, width, 2),
+        height:                 _styleguideGetLoaderDimension(large, static, height, 2),
+        margin-top:             _styleguideGetLoaderDimension(large, static, height, 2) / -2,
+        margin-left:            _styleguideGetLoaderDimension(large, static, width, 2) / -2,
+        animation:              _styleguideGetLoaderAnimation(large, 2)
+      )
+    )
+  ),
+  small in dark: (
+    ie-pseudo-after:      _styleguideGetLoaderExpression(small, 2),
+    selectors: (
+      "&:after": (
+        background-position:    _styleguideGetLoaderPosition(small, static, 2),
+        width:                  _styleguideGetLoaderDimension(small, static, width, 2),
+        height:                 _styleguideGetLoaderDimension(small, static, height, 2),
+        margin-top:             _styleguideGetLoaderDimension(small, static, height, 2) / -2,
+        margin-left:            _styleguideGetLoaderDimension(small, static, width, 2) / -2,
+        animation:              _styleguideGetLoaderAnimation(small, 2)
+      )
+    )
+  ),
+  in $STYLEGUIDE_CANVAS_ID: (
+    background-color:     _styleguideGetContextColor($CONFIG_TEXTURE_CANVAS)
+  ),
+  in $STYLEGUIDE_MODULES_ID: (
+    background-color:     _styleguideGetContextColor($CONFIG_TEXTURE_MODULE)
+  ),
+  in $STYLEGUIDE_HEADINGS_ID: (
+    background-color:     _styleguideGetContextColor($CONFIG_TEXTURE_HEADING)
+  ),
+  in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:              in dark,
+    background-color:     _styleguideGetContextColor($CONFIG_TEXTURE_BRISTOL)
+  ),
+  in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:              in dark,
+    background-color:     _styleguideGetContextColor($CONFIG_TEXTURE_PUNCHCUT)
+  ),
+  small in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:              small in dark
+  ),
+  large in $STYLEGUIDE_BRISTOLS_ID: (
+    inherit:              large in dark
+  ),
+  small in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:              small in dark
+  ),
+  large in $STYLEGUIDE_PUNCHCUTS_ID: (
+    inherit:              large in dark
+  ),
+  without mask: (
+    background-color:     null,
+    opacity:              null
+  )
+)) !global;
+}