@nycds/button 0.4.0

package/README.org

@@ -0,0 +1,64 @@
+#+title: Button
+
+Buttons encourage users to take an action. They use text or icons to communicate  what will happen after the user engages with the button. They are one of two action components, along with links.
+
+* Primary button :docs-site:
+
+The primary button can be utilized with a ~button~ or ~a~ element, with the following:
+- *Class*: ~nyc-button~
+- *Attribute*: ~data-variant="primary"~
+
+#+results: primary-button-example
+
+#+name: primary-button-example
+#+begin_src html :exports both :results replace html
+  <div class="code-examples">
+    <button class="nyc-button">Default</button>
+    <button class="nyc-button" data-variant="primary" disabled>Disabled</button>
+    <a href="#" class="nyc-button" data-variant="primary">Link button</a>
+  </div>
+#+end_src
+
+* Secondary button :docs-site:
+
+The secondary button can be utilized with a ~button~ or ~a~ element, with the following:
+- *Class*: ~nyc-button~
+- *Attribute*: ~data-variant="secondary"~
+
+#+results: secondary-button-example
+
+#+name: secondary-button-example
+#+begin_src html :exports both :results replace html
+  <div class="code-examples">
+    <button class="nyc-button" data-variant="secondary">Default</button>
+    <button class="nyc-button" data-variant="secondary" disabled>Disabled</button>
+    <a href="#" class="nyc-button" data-variant="secondary">Link button</a>
+  </div>
+#+end_src
+
+* Icon button :docs-site:
+
+The icon button can be utilized with a ~button~ or ~a~ element, with the following attributes:
+- *Class*: ~nyc-button~
+- *Attribute*: ~data-variant="icon"~
+- *Icon element*: An icon element should be placed inside the button or link, using an icon font class enabled in the icons package (The package draws from the [[https://icon-sets.iconify.design/ph/][Iconify: Phosphor Iconset]]).
+
+#+results: icon-button-example
+
+#+name: icon-button-example
+#+begin_src html :exports both :results replace html
+  <div class="code-examples">
+    <div>
+      <h4>Default</h4>
+      <button type="button" class="nyc-button" data-variant="icon" aria-label="Next"><i class="i-ph:caret-right-bold"></i></button>
+    </div>
+    <div>
+      <h4>Disabled</h4>
+      <button type="button" class="nyc-button" data-variant="icon" aria-label="Next" disabled><i class="i-ph:caret-right-bold"></i></button>
+    </div>
+    <div>
+      <h4>Link Button</h4>
+      <a href="#" class="nyc-button" data-variant="icon" aria-label="Next"><i class="i-ph:caret-right-bold"></i></a>
+    </div>
+  </div>
+#+end_src

package/css.org

@@ -0,0 +1,344 @@
+#+title: Button
+
+Buttons encourage users to take an action. They use text or icons to communicate  what will happen after the user engages with the button. They are one of two action components, along with links.
+
+** Examples
+
+#+results: button-basic-example
+
+#+name: button-basic-example
+#+begin_src html :exports both :results replace html
+  <a href="#" class="button">Default button</a>
+  <a href="#" class="button" data-variant="primary">Primary button</a>
+  <a href="#" class="button">
+    <span>Button with icon</span>
+    <i class="i-ri:arrow-right-line"></i>
+  </a>
+
+#+end_src
+
+** Custom properties
+
+Use these custom properties in your theme to override default styling
+
+| Property                      | Default      |
+|-------------------------------+--------------|
+| --nyc-cmp-button-color        | currentColor |
+| --nyc-cmp-button-background   | white        |
+| --nyc-cmp-button-border-width | 2px          |
+| --nyc-cmp-button-border-color | grey         |
+| --nyc-cmp-button-shadow       | none         |
+| --nyc-cmp-button-padding      | .75rem       |
+
+** Base styles
+
+The =button= CSS class implements the custom properties and other
+default styles.
+
+*** Mixin
+
+#+begin_src css :noweb-ref mixins-base
+  @define-mixin button {
+    --_background: var(--nyc-cmp-button-background, hsl(0 0% 100%));
+    --_background-hover: var(--nyc-cmp-button-background-hover, hsl(0 0% 100%));
+    --_border-color: var(--nyc-cmp-button-border-color, hsl(0 0% 93%));
+    --_border-color-hover: var(--nyc-cmp-button-border-color-hover, currentColor);
+    --_border-width: var(--nyc-cmp-button-border-width, 2px);
+    --_border-radius: var(--nyc-cmp-button-border-radius, 0);
+    --_color: var(--nyc-cmp-button-color, hsl(0 0% 0%));
+    --_color-hover: var(--nyc-cmp-button-color-hover, hsl(0 0% 0%));
+    --_font-weight: var(--nyc-cmp-button-font-weight, 500);
+    --_font-size: var(--nyc-cmp-button-font-size, 1rem);
+    --_shadow: var(--nyc-cmp-button-shadow, none);
+    --_padding-block: var(--nyc-cmp-button-padding-block, 0.75rem);
+    --_padding-inline: var(--nyc-cmp-button-padding-inline, 0.75rem);
+    --_outline-color: var(--nyc-cmp-button-outline-color, inherit);
+    --_gap: var(--nyc-cmp-button-gap, 0.5rem);
+
+    appearance: none;
+    background-color: var(--_background);
+    border-color: var(--_border-color);
+    border-width: var(--_border-width);
+    border-style: solid;
+    border-radius: var(--_border-radius);
+    color: var(--_color);
+    padding: var(--_padding-block) var(--_padding-inline);
+    box-shadow: var(--_shadow);
+    text-decoration: none;
+    cursor: pointer;
+    font-weight: var(--_font-weight);
+    font-size: var(--_font-size);
+    line-height: inherit;
+    display: inline-flex;
+    justify-content: center;
+    gap: var(--_gap);
+    align-items: center;
+    transition: all 0.3s ease;
+    text-align: center;
+
+    /* & > :first-child:not(i) { */
+    /*   flex-grow: 1; */
+    /*   width: max-content; */
+    /* } */
+
+    /* & > i:last-child { */
+    /*   flex-shrink: 0; */
+    /*   margin-block: auto; */
+    /*   font-size: 1.5rem; */
+
+    /*   margin-inline-start: .5em; */
+    /* } */
+
+    &:hover {
+      background: var(--_background-hover);
+      color: var(--_color-hover);
+      border-color: var(--_border-color-hover);
+      text-decoration: none;
+    }
+
+    &:focus-visible {
+      outline: 3px solid var(--_outline-color);
+      outline-offset: 0;
+    }
+
+    &[disabled] {
+      --nyc-cmp-button-color: var(--nyc-sys-color-on-disabled) !important;
+      --nyc-cmp-button-background: var(--nyc-sys-color-disabled) !important;
+      --nyc-cmp-button-border-color: var(--nyc-sys-color-on-disabled) !important;
+    }
+
+    /* @media (width > 768px) { */
+    /*   --_font-size: var(--nyc-cmp-button-font-size-max, 1rem); */
+    /* } */
+  }
+#+end_src
+
+*** Default class
+
+#+begin_src css :noweb-ref default-base
+  .button,
+  .button:link,
+  .button:visited {
+    @mixin button;
+  }
+  #+end_src
+
+*** AEM class
+
+#+begin_src css :noweb-ref aem-base
+  .cmp-button,
+  .cmp-button:link,
+  .cmp-button:visited {
+    @mixin button;
+  }
+#+end_src
+
+** Variants
+
+*** Primary
+
+**** Mixin
+
+#+begin_src css :noweb-ref mixins-primary
+  @define-mixin button-primary {
+    --nyc-cmp-button-background: var(--nyc-sys-color-primary);
+    --nyc-cmp-button-color: var(--nyc-sys-color-on-primary);
+    --nyc-cmp-button-border-color: var(--nyc-sys-color-primary);
+    --nyc-cmp-button-shadow: none;
+    &:hover {
+      --nyc-cmp-button-color-hover: var(--nyc-cmp-button-color);
+      --nyc-cmp-button-background-hover: var(--nyc-sys-color-primary-hover);
+      --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-primary-hover);
+    }
+  }
+#+end_src
+
+**** Default class
+
+#+begin_src css :noweb-ref default-primary
+  .button[data-variant='primary'] {
+    @mixin button-primary;
+  }
+#+end_src
+
+**** AEM class
+
+#+begin_src css :noweb-ref aem-primary
+  .cmp-button--primary .cmp-button {
+    @mixin button-primary;
+  }
+#+end_src
+
+*** Secondary
+
+**** Mixin
+
+#+begin_src css :noweb-ref mixins-secondary
+  @define-mixin button-secondary {
+    --nyc-cmp-button-background: var(--nyc-sys-color-secondary);
+    --nyc-cmp-button-color: var(--nyc-sys-color-on-secondary);
+    --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
+    --nyc-cmp-button-shadow: none;
+    &:hover {
+      --nyc-cmp-button-color-hover: var(--nyc-sys-color-on-secondary-hover);
+      --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
+    }
+  }
+#+end_src
+
+**** Default class
+
+#+begin_src css :noweb-ref default-secondary
+  .button[data-variant='secondary'] {
+    @mixin button-secondary;
+  }
+#+end_src
+
+**** AEM class
+
+#+begin_src css :noweb-ref aem-secondary
+  .cmp-button--secondary .cmp-button {
+    @mixin button-secondary;
+  }
+#+end_src
+
+*** Icon
+
+**** Mixin
+
+#+begin_src css :noweb-ref mixins-icon
+  @define-mixin button-icon {
+    --nyc-cmp-button-background: var(--nyc-sys-color-primary);
+    --nyc-cmp-button-color: var(--nyc-sys-color-on-primary);
+    --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
+    --nyc-cmp-button-shadow: none;
+    --nyc-cmp-button-padding-inline: var(--nyc-cmp-button-padding-block);
+    &:hover {
+      --nyc-cmp-button-color-hover: var(--nyc-sys-color-on-primary-hover);
+      --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
+    }
+
+    &[disabled] {
+      --nyc-cmp-button-color: var(--nyc-sys-color-on-disabled);
+      --nyc-cmp-button-background: var(--nyc-sys-color-disabled);
+      --nyc-cmp-button-border-color: var(--nyc-sys-color-on-disabled);
+    }
+  }
+#+end_src
+
+**** Default class
+
+#+begin_src css :noweb-ref default-icon
+  .button[data-variant='icon'] {
+    @mixin button-icon;
+  }
+#+end_src
+
+**** AEM class
+
+#+begin_src css :noweb-ref aem-icon
+  .cmp-button--icon .cmp-button {
+    @mixin button-icon;
+  }
+#+end_src
+
+
+*** Full width
+
+**** Mixin
+
+#+begin_src css :noweb-ref full-width
+  @define-mixin button-full-width {
+    @media (max-width: 768px) {
+      &:first-child {
+        width: 100%;
+      }
+    }
+  }
+#+end_src
+
+**** Default class
+
+#+begin_src css :noweb-ref default-full-width
+  .button[data-variant='button-full-width'] {
+    @mixin button-full-width;
+  }
+#+end_src
+
+**** AEM class
+
+#+begin_src css :noweb-ref aem-full-width
+  .cmp-button--full-width .cmp-button {
+    @mixin button-full-width;
+  }
+#+end_src
+
+
+*** Sizes
+
+**** Mixin
+
+#+begin_src css :noweb-ref mixins-sizes
+  @define-mixin button-sm {
+    --nyc-cmp-button-border-radius: var(--nyc-sys-radius-lg);
+    --nyc-cmp-button-padding-block: var(--nyc-sys-space-2xs);
+    --nyc-cmp-button-padding-inline: var(--nyc-sys-space-2xs);
+    --nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
+    --nyc-cmp-button-font-weight: 600;
+  }
+#+end_src
+
+**** Default class
+
+#+begin_src css :noweb-ref default-sizes
+  .button[data-size='sm'] {
+    @mixin button-sm;
+  }
+#+end_src
+
+**** AEM class
+
+#+begin_src css :noweb-ref aem-sizes
+  .cmp-button--sm .cmp-button {
+    @mixin button-sm;
+  }
+#+end_src
+
+** File exports :noexport:
+
+*** Mixins
+
+#+begin_src css :noweb yes
+  /* Generated from README.org - do not edit directly */
+  <<mixins-base>>
+  <<mixins-primary>>
+  <<mixins-secondary>>
+  <<mixins-icon>>
+  <<mixins-sizes>>
+#+end_src
+
+*** Default
+
+#+begin_src css :noweb yes
+  /* Generated from README.org - do not edit directly */
+  @import './mixins.css';
+
+  <<default-base>>
+  <<default-primary>>
+  <<default-secondary>>
+  <<default-icon>>
+  <<default-sizes>>
+#+end_src
+
+*** AEM
+
+#+begin_src css :noweb yes
+  /* Generated from README.org - do not edit directly */
+  @import '../mixins.css';
+
+  <<aem-base>>
+  <<aem-primary>>
+  <<aem-secondary>>
+  <<aem-icon>>
+  <<aem-sizes>>
+#+end_src