@wavemaker-ai/foundation-css 1.0.0-rc.647469

package/src/styles/mobile/components/variables/accordion.variant.less

@@ -0,0 +1,18 @@
+.app-accordion-active-header,
+.app-accordion-active-header-title,
+.app-accordion-header-collapse-icon,
+.app-accordion-active-header-badge,
+.app-accordion-active-title-icon {
+  --wm-accordion-header-border-color: var(--wm-color-primary);
+  --wm-accordion-header-background-color: var(--wm-color-primary);
+  --wm-accordion-text-background-color: transparent;
+  --wm-accordion-text-border-width: var(--wm-border-width-0);
+  --wm-accordion-text-border-radius: 0px;
+  --wm-accordion-text-border-color: var(--wm-color-outline);
+  --wm-accordion-text-color: var(--wm-color-white);
+  --wm-accordion-title-icon-color: var(--wm-color-white);
+  --wm-accordion-icon-color: var(--wm-color-white);
+  --wm-accordion-badge-border-color: var(--wm-color-white);
+  --wm-accordion-badge-background-color: transparent;
+  --wm-accordion-badge-color: var(--wm-color-white);
+}

package/src/styles/mobile/components/variables/button.variant.less

@@ -0,0 +1,254 @@
+.app-button-disabled {
+  --wm-btn-color: var(--wm-color-on-surface);
+  --wm-btn-background: var(--wm-color-surface-container-highest);
+  --wm-btn-border-color: var(--wm-color-surface-container-highest);
+  --wm-btn-opacity: 0.38;
+  --wm-btn-cursor: not-allowed;
+  --wm-btn-shadow: none;
+}
+
+.btn-filled-default {
+  --wm-btn-background: var(--wm-color-surface);
+  --wm-btn-color: var(--wm-color-on-surface);
+  --wm-btn-border-color: var(--wm-color-surface-container-highest);
+}
+
+.btn-filled-primary {
+  --wm-btn-background: var(--wm-color-primary);
+  --wm-btn-color: var(--wm-color-on-primary);
+  --wm-btn-border-color: var(--wm-color-primary);
+}
+
+.btn-filled-secondary {
+  --wm-btn-background: var(--wm-color-secondary);
+  --wm-btn-color: var(--wm-color-on-secondary);
+  --wm-btn-border-color: var(--wm-color-secondary);
+}
+
+.btn-filled-tertiary {
+  --wm-btn-background: var(--wm-color-tertiary);
+  --wm-btn-color: var(--wm-color-on-tertiary);
+  --wm-btn-border-color: var(--wm-color-tertiary);
+}
+
+.btn-filled-success {
+  --wm-btn-background: var(--wm-color-success);
+  --wm-btn-color: var(--wm-color-on-success);
+  --wm-btn-border-color: var(--wm-color-success);
+}
+
+.btn-filled-info {
+  --wm-btn-background: var(--wm-color-info);
+  --wm-btn-color: var(--wm-color-on-info);
+  --wm-btn-border-color: var(--wm-color-info);
+}
+
+.btn-filled-warning {
+  --wm-btn-background: var(--wm-color-warning);
+  --wm-btn-color: var(--wm-color-on-warning);
+  --wm-btn-border-color: var(--wm-color-warning);
+}
+
+.btn-filled-danger {
+  --wm-btn-background: var(--wm-color-error);
+  --wm-btn-color: var(--wm-color-on-error);
+  --wm-btn-border-color: var(--wm-color-error);
+}
+
+.btn-outlined-default {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-on-surface);
+  --wm-btn-border-color: var(--wm-color-surface-container-highest);
+}
+
+.btn-outlined-primary {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-primary);
+  --wm-btn-border-color: var(--wm-color-primary);
+}
+
+.btn-outlined-secondary {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-secondary);
+  --wm-btn-border-color: var(--wm-color-secondary);
+}
+
+.btn-outlined-tertiary {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-tertiary);
+  --wm-btn-border-color: var(--wm-color-tertiary);
+}
+
+.btn-outlined-success {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-success);
+  --wm-btn-border-color: var(--wm-color-success);
+}
+
+.btn-outlined-info {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-info);
+  --wm-btn-border-color: var(--wm-color-info);
+}
+
+.btn-outlined-warning {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-warning);
+  --wm-btn-border-color: var(--wm-color-warning);
+}
+
+.btn-outlined-danger {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-error);
+  --wm-btn-border-color: var(--wm-color-error);
+}
+
+.btn-outlined-error {
+  --wm-btn-background: transparent;
+  --wm-btn-color: var(--wm-color-error);
+  --wm-btn-border-color: var(--wm-color-error);
+}
+
+.btn-text-default {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-on-surface);
+}
+
+.btn-text-primary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-primary);
+}
+
+.btn-text-secondary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-secondary);
+}
+
+.btn-text-tertiary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-tertiary);
+}
+
+.btn-text-success {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-success);
+}
+
+.btn-text-info {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-info);
+}
+
+.btn-text-warning {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-warning);
+}
+
+.btn-text-danger {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-error);
+}
+
+.btn-text-error {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-error);
+}
+
+.btn-standard-default {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-on-surface);
+}
+
+.btn-standard-primary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-primary);
+}
+
+.btn-standard-secondary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-secondary);
+}
+
+.btn-standard-tertiary {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-tertiary);
+}
+
+.btn-standard-success {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-success);
+}
+
+.btn-standard-info {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-info);
+}
+
+.btn-standard-warning {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-warning);
+}
+
+.btn-standard-danger {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-error);
+}
+
+.btn-standard-error {
+  --wm-btn-background: none;
+  --wm-btn-border-color: transparent;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
+  --wm-btn-color: var(--wm-color-error);
+}
+
+.btn-icon {
+  --wm-btn-min-height: 40px;
+  --wm-btn-min-width: 40px;
+  --wm-btn-padding: var(--wm-space-0);
+  --wm-btn-icon-size: var(--wm-icon-size-md);
+}
+
+.btn-elevated {
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+}
+
+.btn-fab {
+  --wm-btn-min-height: 56px;
+  --wm-btn-min-width: 56px;
+  --wm-btn-border-radius: 16px;
+  --wm-btn-shadow: var(--wm-elevation-shadow-1);
+}

package/src/styles/mobile/components/variables/cards.variant.less

@@ -0,0 +1,23 @@
+.card-default {
+  --wm-card-border-width: var(--wm-border-width-base);
+  --wm-card-border-style: var(--wm-border-style-base);
+  --wm-card-border-color: var(--wm-color-outline-variant);
+  --wm-card-border-radius: var(--wm-radius-md);
+  --wm-card-background: transparent;
+  --wm-card-shadow: none;
+}
+
+.card-filled {
+  --wm-card-border-width: 0;
+  --wm-card-border-style: var(--wm-border-style-base);
+  --wm-card-border-color: var(--wm-color-outline-variant);
+  --wm-card-border-radius: var(--wm-radius-md);
+  --wm-card-background: var(--wm-color-surface-bright);
+  --wm-card-shadow: none;
+}
+
+.card-elevated {
+  --wm-card-border-width: 0px;
+  --wm-card-shadow: var(--wm-elevation-shadow-1);
+  --wm-card-background: var(--wm-color-surface-container-lowest);
+}

package/src/styles/mobile/components/variables/carousel.variant.less

@@ -0,0 +1,18 @@
+.app-carousel-active-dot,
+.app-carousel-active-slide {
+  --wm-carousel-dots-background: var(--wm-color-primary-container);
+  --wm-carousel-dots-opacity: 1px;
+  --wm-carousel-dots-width: 10px;
+  --wm-carousel-dots-height: 10px;
+  --wm-carousel-dots-border-color: var(--wm-color-primary-container);
+  --wm-carousel-dots-border-radius: 5px;
+  --wm-carousel-dots-border-width: var(--wm-border-width-base);
+  --wm-carousel-dots-margin: var(--wm-space-0) var(--wm-radius-xxs);
+  --wm-carousel-slide-width: 100%;
+  --wm-carousel-slide-padding: var(--wm-space-0) var(--wm-space-4);
+  --wm-carousel-slide-border-radius: var(--wm-radius-none);
+  --wm-carousel-slide-border-color: transparent;
+  --wm-carousel-slide-border-width: var(--wm-border-width-base);
+  --wm-carousel-slide-border-style: var(--wm-border-style-solid);
+  --wm-carousel-slide-background: transparent;
+}

package/src/styles/mobile/components/variables/checkbox.variant.less

@@ -0,0 +1,16 @@
+.app-checkbox-checkicon,
+.app-checkbox-selected-label {
+  --wm-checkbox-background-color: var(--wm-color-primary);
+  --wm-checkbox-border-color: var(--wm-color-primary);
+  --wm-checkbox-icon-color: var(--wm-color-on-primary);
+  --wm-checkbox-label-font-size: var(--wm-body-large-font-size);
+  --wm-checkbox-label-font-family: var(--wm-body-large-font-family);
+  --wm-checkbox-label-color: var(--wm-color-on-surface-variant);
+}
+
+.app-checkbox-disabled {
+  --wm-checkbox-opacity: 0.8;
+  --wm-checkbox-label-font-size: var(--wm-body-large-font-size);
+  --wm-checkbox-label-font-family: var(--wm-body-large-font-family);
+  --wm-checkbox-label-color: var(--wm-color-on-surface-variant);
+}

package/src/styles/mobile/components/variables/checkboxset.variant.less

@@ -0,0 +1,18 @@
+.app-checkboxset-checkicon,
+.app-checkboxset-selected-label {
+  --wm-checkboxset-background-color: var(--wm-color-primary);
+  --wm-checkboxset-border-color: var(--wm-color-primary);
+  --wm-checkboxset-icon-color: var(--wm-color-on-primary);
+  --wm-checkboxset-label-font-size: var(--wm-body-large-font-size);
+  --wm-checkboxset-label-font-family: var(--wm-body-large-font-family);
+  --wm-checkboxset-label-font-margin-left: var(--wm-space-2);
+  --wm-checkboxset-label-color: var(--wm-color-on-surface-variant);
+}
+
+.app-checkboxset-disabled {
+  --wm-checkboxset-opacity: 0.6;
+  --wm-checkboxset-border-width: 2px;
+  --wm-checkboxset-border-radius: var(--wm-radius-xxs);
+  --wm-checkboxset-border-color: var(--wm-color-on-surface-variant);
+  --wm-checkboxset-label-color: var(--wm-color-on-surface-variant);
+}

package/src/styles/mobile/components/variables/chips.variant.less

@@ -0,0 +1,40 @@
+.app-chips-disabled {
+  --wm-chips-opacity: 0.38;
+  --wm-chips-pointer-events: none;
+}
+
+.app-chips-active-item,
+.app-chips-active-item-text {
+  --wm-chips-color: var(--wm-color-on-surface-variant);
+  --wm-chips-background-color: var(--wm-color-secondary-container);
+  --wm-chips-item-border-color: var(--wm-color-secondary-container);
+}
+
+.chips-filled-default {
+  --wm-chips-border-width: 0;
+  --wm-chips-background-color: var(--wm-color-surface);
+  --wm-chips-color: var(--wm-color-on-surface);
+}
+
+.chips-filled-primary {
+  --wm-chips-border-width: 0;
+  --wm-chips-background-color: var(--wm-color-primary);
+  --wm-chips-color: var(--wm-color-on-primary);
+}
+
+.chips-filled-secondary {
+  --wm-chips-border-width: 0;
+  --wm-chips-background-color: var(--wm-color-secondary);
+  --wm-chips-color: var(--wm-color-on-secondary);
+}
+
+.chips-filled-tertiary {
+  --wm-chips-border-width: 0;
+  --wm-chips-background-color: var(--wm-color-tertiary);
+  --wm-chips-color: var(--wm-color-on-tertiary);
+}
+
+.chips-elevated {
+  --wm-chips-border-width: 0;
+  --wm-chips-shadow: var(--wm-elevation-shadow-1);
+}

package/src/styles/mobile/components/variables/container.variant.less

@@ -0,0 +1,26 @@
+.app-default-container {
+  --wm-container-border-style: var(--wm-border-style-base);
+  --wm-container-border-width: var(--wm-border-width-0);
+  --wm-container-border-color: transparent;
+  --wm-container-border-radius: var(--wm-radius-none);
+  --wm-container-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-container-padding: var(--wm-space-0);
+}
+
+.app-outlined-container {
+  --wm-container-border-style: var(--wm-border-style-base);
+  --wm-container-border-width: var(--wm-border-width-base);
+  --wm-container-border-color: var(--wm-color-outline-variant);
+  --wm-container-border-radius: 1px;
+  --wm-container-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-container-padding: var(--wm-space-0);
+}
+
+.app-elevated-container {
+  --wm-container-box-shadow: var(--wm-elevation-shadow-1);
+  --wm-container-border-style: var(--wm-border-style-base);
+  --wm-container-border-color: transparent;
+  --wm-container-border-width: var(--wm-border-width-base);
+  --wm-container-border-radius: var(--wm-radius-sm);
+  --wm-container-padding: var(--wm-space-0);
+}

package/src/styles/mobile/components/variables/form-controls.variant.less

@@ -0,0 +1,105 @@
+.app-input-focused {
+  --wm-form-controls-border-color: var(--wm-color-primary);
+  --wm-form-controls-border-width: var(--wm-border-width-1);
+  --wm-form-controls-background: var(--wm-color-outline-variant);
+  --wm-form-controls-color: var(--wm-color-black);
+  --wm-form-controls-floating-color: var(--wm-color-surface-dim);
+  --wm-form-controls-floating-font-size: var(--wm-body-medium-font-size);
+  --wm-form-controls-floating-font-weight: var(--wm-body-medium-font-weight);
+  --wm-form-controls-floating-font-family: var(--wm-body-medium-font-family);
+  --wm-form-controls-floating-top: var(--wm-space-3);
+  --wm-form-controls-floating-left: var(--wm-space-4);
+  --wm-form-controls-floating-padding: var(--wm-space-0);
+}
+
+.app-input-disabled {
+  --wm-form-controls-border-color: var(--wm-color-shadow);
+  --wm-form-controls-border-width: var(--wm-border-width-1);
+  --wm-form-controls-background: var(--wm-color-surface-dim);
+  --wm-form-controls-color: var(--wm-color-scrim);
+  --wm-form-controls-opacity: 0.67;
+}
+
+.form-controls-filled {
+  --wm-form-controls-opacity: var(--wm-border-width-1);
+  --wm-form-controls-min-height: 56px;
+  --wm-form-controls-min-width: 210px;
+  --wm-form-controls-padding: var(--wm-space-4);
+  --wm-form-controls-border-color: var(--wm-color-outline);
+  --wm-form-controls-border-radius: var(--wm-radius-sm) var(--wm-radius-sm) 0 0;
+  --wm-form-controls-border-style: var(--wm-border-style-base);
+  --wm-form-controls-border-width: 0 0 var(--wm-border-width-1) 0;
+  --wm-form-controls-placeholder-color: var(--wm-color-on-surface-variant);
+  --wm-form-controls-background: var(--wm-color-surface-dim);
+  --wm-form-controls-color: var(--wm-color-black);
+  --wm-form-controls-floating-color: var(--wm-color-on-surface-variant);
+  --wm-form-controls-floating-top: var(--wm-space-5);
+  --wm-form-controls-floating-left: var(--wm-space-3);
+  --wm-form-controls-label-color: var(--wm-color-on-surface-variant);
+  --wm-form-controls-label-background: var(--wm-color-transparent);
+  --wm-form-controls-label-font-size: var(--wm-label-large-font-size);
+  --wm-form-controls-label-font-weight: var(--wm-label-large-font-weight);
+  --wm-form-controls-label-font-family: var(--wm-label-large-font-family);
+  --wm-form-controls-label-margin-vertical: var(--wm-space-0);
+  --wm-form-controls-label-margin-horizontal: var(--wm-space-0);
+}
+
+.form-controls-filled.app-input-focused {
+  --wm-form-controls-min-height: 56px;
+  --wm-form-controls-min-width: 210px;
+  --wm-form-controls-border-width: 0 0 var(--wm-border-width-2) 0;
+  --wm-form-controls-border-style: var(--wm-border-style-base);
+  --wm-form-controls-border-radius: var(--wm-radius-sm) var(--wm-radius-sm) 0 0;
+  --wm-form-controls-floating-color: var(--wm-color-outline);
+  --wm-form-controls-floating-top: var(--wm-space-5);
+  --wm-form-controls-floating-left: var(--wm-space-3);
+  --wm-form-controls-label-color: var(--wm-color-outline);
+  --wm-form-controls-padding: var(--wm-space-4);
+}
+
+.form-controls-filled.app-input-disabled {
+  --wm-form-controls-border-color: var(--wm-color-shadow);
+  --wm-form-controls-border-width: 0 0 var(--wm-border-width-1) 0;
+  --wm-form-controls-background: var(--wm-color-surface-dim);
+  --wm-form-controls-color: var(--wm-color-scrim);
+  --wm-form-controls-opacity: 0.67;
+}
+
+.form-controls-outlined {
+  --wm-form-controls-opacity: 1;
+  --wm-form-controls-min-height: 56px;
+  --wm-form-controls-min-width: 210px;
+  --wm-form-controls-font-size: var(--wm-body-large-font-size);
+  --wm-form-controls-font-weight: var(--wm-body-large-font-weight);
+  --wm-form-controls-font-family: var(--wm-body-large-font-family);
+  --wm-form-controls-padding: var(--wm-space-4);
+  --wm-form-controls-border: var(--wm-border-width-1);
+  --wm-form-controls-placeholder-color: var(--wm-color-on-surface);
+  --wm-form-controls-background: transparent;
+  --wm-form-controls-color: var(--wm-color-black);
+  --wm-form-controls-label-color: var(--wm-color-on-surface);
+  --wm-form-controls-label-background: var(--wm-color-transparent);
+  --wm-form-controls-floating-color: var(--wm-color-surface-dim);
+  --wm-form-controls-floating-top: var(--wm-space-5);
+  --wm-form-controls-floating-left: var(--wm-space-4);
+}
+
+.form-controls-outlined.app-input-focused {
+  --wm-form-controls-min-height: 56px;
+  --wm-form-controls-min-width: 210px;
+  --wm-form-controls-border-color: var(--wm-color-secondary);
+  --wm-form-controls-border-width: var(--wm-border-width-1);
+  --wm-form-controls-padding: var(--wm-space-4);
+  --wm-form-controls-background: transparent;
+  --wm-form-controls-color: var(--wm-color-black);
+  --wm-form-controls-floating-color: var(--wm-color-primary);
+  --wm-form-controls-floating-top: var(--wm-space-5);
+  --wm-form-controls-floating-left: var(--wm-space-4);
+}
+
+.form-controls-outlined.app-input-disabled {
+  --wm-form-controls-border: 1px solid var(--wm-color-shadow);
+  --wm-form-controls-background: transparent;
+  --wm-form-controls-color: var(--wm-color-scrim);
+  --wm-form-controls-opacity: 0.67;
+}

package/src/styles/mobile/components/variables/icon.variant.less

@@ -0,0 +1,48 @@
+.fa-xs {
+  --wm-icon-font-size: var(--wm-icon-size-xs);
+  --wm-icon-min-width: var(--wm-icon-size-xs);
+  --wm-icon-width: var(--wm-icon-size-xs);
+  --wm-icon-height: var(--wm-icon-size-xs);
+}
+
+.fa-sm {
+  --wm-icon-font-size: var(--wm-icon-size-sm);
+  --wm-icon-min-width: var(--wm-icon-size-sm);
+  --wm-icon-width: var(--wm-icon-size-sm);
+  --wm-icon-height: var(--wm-icon-size-sm);
+}
+
+.fa-lg {
+  --wm-icon-font-size: var(--wm-icon-size-lg);
+  --wm-icon-min-width: var(--wm-icon-size-lg);
+  --wm-icon-width: var(--wm-icon-size-lg);
+  --wm-icon-height: var(--wm-icon-size-lg);
+}
+
+.fa-2x {
+  --wm-icon-font-size: var(--wm-icon-size-2x);
+  --wm-icon-min-width: var(--wm-icon-size-2x);
+  --wm-icon-width: var(--wm-icon-size-2x);
+  --wm-icon-height: var(--wm-icon-size-2x);
+}
+
+.fa-3x {
+  --wm-icon-font-size: var(--wm-icon-size-3x);
+  --wm-icon-min-width: var(--wm-icon-size-3x);
+  --wm-icon-width: var(--wm-icon-size-3x);
+  --wm-icon-height: var(--wm-icon-size-3x);
+}
+
+.fa-4x {
+  --wm-icon-font-size: var(--wm-icon-size-4x);
+  --wm-icon-min-width: var(--wm-icon-size-4x);
+  --wm-icon-width: var(--wm-icon-size-4x);
+  --wm-icon-height: var(--wm-icon-size-4x);
+}
+
+.fa-5x {
+  --wm-icon-font-size: var(--wm-icon-size-5x);
+  --wm-icon-min-width: var(--wm-icon-size-5x);
+  --wm-icon-width: var(--wm-icon-size-5x);
+  --wm-icon-height: var(--wm-icon-size-5x);
+}