@getpara/core-components 0.1.0

package/dist/collection/components/cpsl-text/cpsl-text.css

@@ -0,0 +1,415 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  display: block;
+  font-family: var(--cpsl-font-family, inherit);
+  padding: 0px;
+  margin: 0px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-smooth: never;
+  font-synthesis: none;
+}
+
+:host(.primary) {
+  color: var(--color-override, var(--cpsl-color-text-primary));
+}
+:host(.primary) > p,
+:host(.primary) h1,
+:host(.primary) h2,
+:host(.primary) h3,
+:host(.primary) h4,
+:host(.primary) h5,
+:host(.primary) h6 {
+  color: var(--color-override, var(--cpsl-color-text-primary));
+}
+
+:host(.secondary) {
+  color: var(--color-override, var(--cpsl-color-text-secondary));
+}
+:host(.secondary) > p,
+:host(.secondary) h1,
+:host(.secondary) h2,
+:host(.secondary) h3,
+:host(.secondary) h4,
+:host(.secondary) h5,
+:host(.secondary) h6 {
+  color: var(--color-override, var(--cpsl-color-text-secondary));
+}
+
+:host(.tertiary) {
+  color: var(--color-override, var(--cpsl-color-text-tertiary));
+}
+:host(.tertiary) > p,
+:host(.tertiary) h1,
+:host(.tertiary) h2,
+:host(.tertiary) h3,
+:host(.tertiary) h4,
+:host(.tertiary) h5,
+:host(.tertiary) h6 {
+  color: var(--color-override, var(--cpsl-color-text-tertiary));
+}
+
+:host(.subtle) {
+  color: var(--color-override, var(--cpsl-color-text-subtle));
+}
+:host(.subtle) > p,
+:host(.subtle) h1,
+:host(.subtle) h2,
+:host(.subtle) h3,
+:host(.subtle) h4,
+:host(.subtle) h5,
+:host(.subtle) h6 {
+  color: var(--color-override, var(--cpsl-color-text-subtle));
+}
+
+:host(.inverted) {
+  color: var(--color-override, var(--cpsl-color-text-inverted));
+}
+:host(.inverted) > p,
+:host(.inverted) h1,
+:host(.inverted) h2,
+:host(.inverted) h3,
+:host(.inverted) h4,
+:host(.inverted) h5,
+:host(.inverted) h6 {
+  color: var(--color-override, var(--cpsl-color-text-inverted));
+}
+
+:host(.error) {
+  color: var(--color-override, var(--cpsl-color-text-error));
+}
+:host(.error) > p,
+:host(.error) h1,
+:host(.error) h2,
+:host(.error) h3,
+:host(.error) h4,
+:host(.error) h5,
+:host(.error) h6 {
+  color: var(--color-override, var(--cpsl-color-text-error));
+}
+
+:host(.contrast) {
+  color: var(--color-override, var(--cpsl-color-text-contrast));
+}
+:host(.contrast) > p,
+:host(.contrast) h1,
+:host(.contrast) h2,
+:host(.contrast) h3,
+:host(.contrast) h4,
+:host(.contrast) h5,
+:host(.contrast) h6 {
+  color: var(--color-override, var(--cpsl-color-text-contrast));
+}
+
+:host(.regular) {
+  font-weight: 400;
+}
+:host(.regular) > p,
+:host(.regular) h1,
+:host(.regular) h2,
+:host(.regular) h3,
+:host(.regular) h4,
+:host(.regular) h5,
+:host(.regular) h6 {
+  font-weight: 400;
+}
+
+:host(.medium) {
+  font-weight: 500;
+}
+:host(.medium) > p,
+:host(.medium) h1,
+:host(.medium) h2,
+:host(.medium) h3,
+:host(.medium) h4,
+:host(.medium) h5,
+:host(.medium) h6 {
+  font-weight: 500;
+}
+
+:host(.semi-bold) {
+  font-weight: 600;
+}
+:host(.semi-bold) > p,
+:host(.semi-bold) h1,
+:host(.semi-bold) h2,
+:host(.semi-bold) h3,
+:host(.semi-bold) h4,
+:host(.semi-bold) h5,
+:host(.semi-bold) h6 {
+  font-weight: 600;
+}
+
+:host(.bold) {
+  font-weight: 700;
+}
+:host(.bold) > p,
+:host(.bold) h1,
+:host(.bold) h2,
+:host(.bold) h3,
+:host(.bold) h4,
+:host(.bold) h5,
+:host(.bold) h6 {
+  font-weight: 700;
+}
+
+:host(.body-2xs) {
+  font-size: var(--cpsl-font-size-body-2xs);
+}
+:host(.body-2xs) > p,
+:host(.body-2xs) h1,
+:host(.body-2xs) h2,
+:host(.body-2xs) h3,
+:host(.body-2xs) h4,
+:host(.body-2xs) h5,
+:host(.body-2xs) h6 {
+  font-size: var(--cpsl-font-size-body-2xs);
+}
+
+:host(.body-xs) {
+  font-size: var(--cpsl-font-size-body-xs);
+}
+:host(.body-xs) > p,
+:host(.body-xs) h1,
+:host(.body-xs) h2,
+:host(.body-xs) h3,
+:host(.body-xs) h4,
+:host(.body-xs) h5,
+:host(.body-xs) h6 {
+  font-size: var(--cpsl-font-size-body-xs);
+}
+
+:host(.body-s) {
+  font-size: var(--cpsl-font-size-body-s);
+  line-height: 142.857%;
+}
+:host(.body-s) > p,
+:host(.body-s) h1,
+:host(.body-s) h2,
+:host(.body-s) h3,
+:host(.body-s) h4,
+:host(.body-s) h5,
+:host(.body-s) h6 {
+  font-size: var(--cpsl-font-size-body-s);
+  line-height: 142.857%;
+}
+
+:host(.body-m) {
+  font-size: var(--cpsl-font-size-body-m);
+  line-height: 150%;
+}
+:host(.body-m) > p,
+:host(.body-m) h1,
+:host(.body-m) h2,
+:host(.body-m) h3,
+:host(.body-m) h4,
+:host(.body-m) h5,
+:host(.body-m) h6 {
+  font-size: var(--cpsl-font-size-body-m);
+  line-height: 150%;
+}
+
+:host(.body-l) {
+  font-size: var(--cpsl-font-size-body-l);
+  line-height: 140%;
+}
+:host(.body-l) > p,
+:host(.body-l) h1,
+:host(.body-l) h2,
+:host(.body-l) h3,
+:host(.body-l) h4,
+:host(.body-l) h5,
+:host(.body-l) h6 {
+  font-size: var(--cpsl-font-size-body-l);
+  line-height: 140%;
+}
+
+:host(.body-xl) {
+  font-size: var(--cpsl-font-size-body-xl);
+}
+:host(.body-xl) > p,
+:host(.body-xl) h1,
+:host(.body-xl) h2,
+:host(.body-xl) h3,
+:host(.body-xl) h4,
+:host(.body-xl) h5,
+:host(.body-xl) h6 {
+  font-size: var(--cpsl-font-size-body-xl);
+}
+
+:host(.heading-xs) {
+  font-size: var(--cpsl-font-size-heading-xs);
+}
+:host(.heading-xs) > p,
+:host(.heading-xs) h1,
+:host(.heading-xs) h2,
+:host(.heading-xs) h3,
+:host(.heading-xs) h4,
+:host(.heading-xs) h5,
+:host(.heading-xs) h6 {
+  font-size: var(--cpsl-font-size-heading-xs);
+}
+
+:host(.heading-s) {
+  font-size: var(--cpsl-font-size-heading-s);
+}
+:host(.heading-s) > p,
+:host(.heading-s) h1,
+:host(.heading-s) h2,
+:host(.heading-s) h3,
+:host(.heading-s) h4,
+:host(.heading-s) h5,
+:host(.heading-s) h6 {
+  font-size: var(--cpsl-font-size-heading-s);
+}
+
+:host(.heading-m) {
+  font-size: var(--cpsl-font-size-heading-m);
+  letter-spacing: -0.4px;
+}
+:host(.heading-m) > p,
+:host(.heading-m) h1,
+:host(.heading-m) h2,
+:host(.heading-m) h3,
+:host(.heading-m) h4,
+:host(.heading-m) h5,
+:host(.heading-m) h6 {
+  font-size: var(--cpsl-font-size-heading-m);
+  letter-spacing: -0.4px;
+}
+
+:host(.heading-l) {
+  font-size: var(--cpsl-font-size-heading-l);
+  letter-spacing: -1.12px;
+}
+:host(.heading-l) > p,
+:host(.heading-l) h1,
+:host(.heading-l) h2,
+:host(.heading-l) h3,
+:host(.heading-l) h4,
+:host(.heading-l) h5,
+:host(.heading-l) h6 {
+  font-size: var(--cpsl-font-size-heading-l);
+  letter-spacing: -1.12px;
+}
+
+:host(.heading-xl) {
+  font-size: var(--cpsl-font-size-heading-xl);
+  letter-spacing: -1.28px;
+}
+:host(.heading-xl) > p,
+:host(.heading-xl) h1,
+:host(.heading-xl) h2,
+:host(.heading-xl) h3,
+:host(.heading-xl) h4,
+:host(.heading-xl) h5,
+:host(.heading-xl) h6 {
+  font-size: var(--cpsl-font-size-heading-xl);
+  letter-spacing: -1.28px;
+}
+
+:host(.heading-2xl) {
+  font-size: var(--cpsl-font-size-heading-2xl);
+  letter-spacing: -1.44px;
+}
+:host(.heading-2xl) > p,
+:host(.heading-2xl) h1,
+:host(.heading-2xl) h2,
+:host(.heading-2xl) h3,
+:host(.heading-2xl) h4,
+:host(.heading-2xl) h5,
+:host(.heading-2xl) h6 {
+  font-size: var(--cpsl-font-size-heading-2xl);
+  letter-spacing: -1.44px;
+}
+
+:host p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--cpsl-font-family, inherit);
+  padding: 0px;
+  margin: 0px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-smooth: never;
+  font-synthesis: none;
+}
+:host p::-moz-selection,
+h1::-moz-selection,
+h2::-moz-selection,
+h3::-moz-selection,
+h4::-moz-selection,
+h5::-moz-selection,
+h6::-moz-selection {
+  /* Code for Firefox */
+  color: var(--cpsl-color-text-inverted) !important;
+  background: var(--cpsl-color-background-64) !important;
+}
+:host p::selection,
+h1::selection,
+h2::selection,
+h3::selection,
+h4::selection,
+h5::selection,
+h6::selection {
+  color: var(--cpsl-color-text-inverted) !important;
+  background: var(--cpsl-color-background-64) !important;
+}

package/dist/collection/components/cpsl-text/cpsl-text.js

@@ -0,0 +1,134 @@
+import { Host, h } from "@stencil/core";
+const TEXT_EL_PART = 'text-element';
+export class CpslText {
+    constructor() {
+        this.getContent = () => {
+            switch (this.variant) {
+                case 'headingXS': {
+                    return (h("h6", { part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'headingS': {
+                    return (h("h5", { part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'headingM': {
+                    return (h("h4", { part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'headingL': {
+                    return (h("h3", { part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'headingXL': {
+                    return (h("h2", { part: TEXT_EL_PART }, h("slot", null)));
+                }
+                case 'heading2XL': {
+                    return (h("h1", { part: TEXT_EL_PART }, h("slot", null)));
+                }
+                default: {
+                    return (h("p", { part: TEXT_EL_PART }, h("slot", null)));
+                }
+            }
+        };
+        this.color = 'primary';
+        this.variant = 'bodyM';
+        this.weight = 'regular';
+    }
+    render() {
+        return (h(Host, { key: '0fe34c3a91b7ac83a985eccbf47aa423c21123c1', class: {
+                // COLORS
+                'primary': this.color === 'primary',
+                'secondary': this.color === 'secondary',
+                'tertiary': this.color === 'tertiary',
+                'subtle': this.color === 'subtle',
+                'inverted': this.color === 'inverted',
+                'error': this.color === 'error',
+                'contrast': this.color === 'contrast',
+                // WEIGHTS
+                'medium': this.weight === 'medium',
+                'semi-bold': this.weight === 'semiBold',
+                'bold': this.weight === 'bold',
+                // SIZES
+                'body-2xs': this.variant === 'body2XS',
+                'body-xs': this.variant === 'bodyXS',
+                'body-s': this.variant === 'bodyS',
+                'body-m': this.variant === 'bodyM',
+                'body-l': this.variant === 'bodyL',
+                'body-xl': this.variant === 'bodyXL',
+                'heading-xs': this.variant === 'headingXS',
+                'heading-s': this.variant === 'headingS',
+                'heading-m': this.variant === 'headingM',
+                'heading-l': this.variant === 'headingL',
+                'heading-xl': this.variant === 'headingXL',
+                'heading-2xl': this.variant === 'heading2XL',
+            } }, this.getContent()));
+    }
+    static get is() { return "cpsl-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast'",
+                    "resolved": "\"contrast\" | \"error\" | \"inverted\" | \"primary\" | \"secondary\" | \"subtle\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of text.\nOptions are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\nDefault is: `\"primary\"`."
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL'",
+                    "resolved": "\"body2XS\" | \"bodyL\" | \"bodyM\" | \"bodyS\" | \"bodyXL\" | \"bodyXS\" | \"heading2XL\" | \"headingL\" | \"headingM\" | \"headingS\" | \"headingXL\" | \"headingXS\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of text.\nOptions are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\nDefault is: `\"bodyM\"`."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'bodyM'"
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'regular' | 'medium' | 'semiBold' | 'bold'",
+                    "resolved": "\"bold\" | \"medium\" | \"regular\" | \"semiBold\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The weight of text.\nOptions are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\nDefault is: `\"regular\"`."
+                },
+                "attribute": "weight",
+                "reflect": false,
+                "defaultValue": "'regular'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-text.js.map

package/dist/collection/components/cpsl-text/cpsl-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\nconst TEXT_EL_PART = 'text-element';\n\n@Component({\n  tag: 'cpsl-text',\n  styleUrl: 'cpsl-text.scss',\n  shadow: true,\n})\nexport class CpslText {\n  /**\n   * The color of text.\n   * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"subtle\", `\"inverted\", `\"error\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast' = 'primary';\n\n  /**\n   * The variant of text.\n   * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n   * Default is: `\"bodyM\"`.\n   */\n  @Prop() variant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' = 'bodyM';\n\n  /**\n   * The weight of text.\n   * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n   * Default is: `\"regular\"`.\n   */\n  @Prop() weight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\n\n  private getContent = () => {\n    switch (this.variant) {\n      case 'headingXS': {\n        return (\n          <h6 part={TEXT_EL_PART}>\n            <slot></slot>\n          </h6>\n        );\n      }\n      case 'headingS': {\n        return (\n          <h5 part={TEXT_EL_PART}>\n            <slot></slot>\n          </h5>\n        );\n      }\n      case 'headingM': {\n        return (\n          <h4 part={TEXT_EL_PART}>\n            <slot></slot>\n          </h4>\n        );\n      }\n      case 'headingL': {\n        return (\n          <h3 part={TEXT_EL_PART}>\n            <slot></slot>\n          </h3>\n        );\n      }\n      case 'headingXL': {\n        return (\n          <h2 part={TEXT_EL_PART}>\n            <slot></slot>\n          </h2>\n        );\n      }\n      case 'heading2XL': {\n        return (\n          <h1 part={TEXT_EL_PART}>\n            <slot></slot>\n          </h1>\n        );\n      }\n      default: {\n        return (\n          <p part={TEXT_EL_PART}>\n            <slot></slot>\n          </p>\n        );\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          // COLORS\n          'primary': this.color === 'primary',\n          'secondary': this.color === 'secondary',\n          'tertiary': this.color === 'tertiary',\n          'subtle': this.color === 'subtle',\n          'inverted': this.color === 'inverted',\n          'error': this.color === 'error',\n          'contrast': this.color === 'contrast',\n          // WEIGHTS\n          'medium': this.weight === 'medium',\n          'semi-bold': this.weight === 'semiBold',\n          'bold': this.weight === 'bold',\n          // SIZES\n          'body-2xs': this.variant === 'body2XS',\n          'body-xs': this.variant === 'bodyXS',\n          'body-s': this.variant === 'bodyS',\n          'body-m': this.variant === 'bodyM',\n          'body-l': this.variant === 'bodyL',\n          'body-xl': this.variant === 'bodyXL',\n          'heading-xs': this.variant === 'headingXS',\n          'heading-s': this.variant === 'headingS',\n          'heading-m': this.variant === 'headingM',\n          'heading-l': this.variant === 'headingL',\n          'heading-xl': this.variant === 'headingXL',\n          'heading-2xl': this.variant === 'heading2XL',\n        }}\n      >\n        {this.getContent()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css

@@ -0,0 +1,98 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --button-icon-color: var(--cpsl-color-text-primary);
+  --button-border-radius: var(--cpsl-border-radius-tile-button);
+  --button-background-color: var(--cpsl-color-tile-button-surface-default);
+  --button-border-color: var(--cpsl-color-tile-button-border);
+  --button-width: 72px;
+  --button-height: 56px;
+  --button-gap: 8px;
+}
+
+:host :hover {
+  --button-background-color: var(--cpsl-color-tile-button-surface-hover);
+}
+:host :active {
+  --button-background-color: var(--cpsl-color-tile-button-surface-pressed);
+}
+
+.button-native {
+  border-radius: var(--button-border-radius);
+  -webkit-padding-start: var(--button-padding-start);
+  padding-inline-start: var(--button-padding-start);
+  -webkit-padding-end: var(--button-padding-end);
+  padding-inline-end: var(--button-padding-end);
+  padding-top: var(--button-padding-top);
+  padding-bottom: var(--button-padding-bottom);
+  border: 1px solid transparent;
+  cursor: pointer;
+  background: var(--button-background-color);
+  border-color: var(--button-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-gap);
+  align-items: center;
+  justify-content: center;
+  width: var(--button-width);
+  height: var(--button-height);
+  box-shadow: var(--button-box-shadow);
+}
+.button-native cpsl-icon {
+  --icon-color: var(--button-icon-color);
+  --height: var(--button-icon-height);
+  --width: var(--button-icon-width);
+}