tide-design-system 2.1.11 → 2.1.13

package/index.ts

@@ -2,7 +2,6 @@ import TideAccordionItem from '@/components/TideAccordionItem.vue';
 import TideAlert from '@/components/TideAlert.vue';
 import TideBackgroundImage from '@/components/TideBackgroundImage.vue';
 import TideBadge from '@/components/TideBadge.vue';
-import TideBadgePremium from '@/components/TideBadgePremium.vue';
 import TideBadgeTrustedPartner from '@/components/TideBadgeTrustedPartner.vue';
 import TideBreadCrumbs from '@/components/TideBreadCrumbs.vue';
 import TideButton from '@/components/TideButton.vue';
@@ -30,7 +29,7 @@ import TidePagination from '@/components/TidePagination.vue';
 import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import TideSwitch from '@/components/TideSwitch.vue';
 import { ALERT } from '@/types/Alert';
-import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
+import { BADGE_TRUSTED } from '@/types/Badge';
 import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
 import { TYPE_CARD } from '@/types/Card';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
@@ -47,7 +46,7 @@ import { TEXT_INPUT_TYPE } from '@/types/TextInput';
 import { VALIDATOR } from '@/types/Validation';
 
 import type { Alert } from '@/types/Alert';
-import type { Badge, BadgePremium, BadgeTrustedYears } from '@/types/Badge';
+import type { BadgeTrustedYears } from '@/types/Badge';
 import type { BreadCrumb } from '@/types/BreadCrumb';
 import type { Breakpoint, Media } from '@/types/Breakpoint';
 import type { CardType } from '@/types/Card';
@@ -99,8 +98,6 @@ import '@/assets/css/main.css';
 
 export type {
   Alert,
-  Badge,
-  BadgePremium,
   BadgeTrustedYears,
   BooleanField,
   BooleanInput,
@@ -160,8 +157,6 @@ export type {
 
 export {
   ALERT,
-  BADGE,
-  BADGE_PREMIUM,
   BADGE_TRUSTED,
   BREAKPOINT,
   CSS,
@@ -189,7 +184,6 @@ export {
   TideAlert,
   TideBackgroundImage,
   TideBadge,
-  TideBadgePremium,
   TideBadgeTrustedPartner,
   TideBreadCrumbs,
   TideButton,

package/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.1.11",
+  "version": "2.1.13",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/dynamic-buttons.css

@@ -65,3 +65,282 @@ button.tide-button-quaternary:disabled,
 button.tide-button-floating:disabled {
   opacity: 0.32;
 }
+@media (min-width: 768px) {
+	/* Rest State */
+	.sm-tide-button-primary {
+	  background: var(--tide-primary);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	.sm-tide-button-secondary {
+	  background: var(--tide-surface);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-primary);
+	}
+
+	.sm-tide-button-tertiary {
+	  background: var(--tide-white);
+	  border: 1px solid var(--tide-border);
+	  color: var(--tide-secondary);
+	}
+
+	.sm-tide-button-quaternary {
+	  background: var(--tide-white);
+	  color: var(--tide-secondary);
+	}
+
+	.sm-tide-button-floating {
+	  background-color: var(--tide-transparent-100);
+	  color: var(--tide-secondary);
+	  box-shadow: var(--tide-shadow-bottom);
+	}
+
+	/* Hover State */
+	a.sm-tide-button-primary:hover,
+	button.sm-tide-button-primary:enabled:hover {
+	  border: 2px solid var(--tide-primary);
+	  background: var(--tide-white);
+	  color: var(--tide-primary);
+	}
+
+	a.sm-tide-button-secondary:hover,
+	button.sm-tide-button-secondary:enabled:hover {
+	  background: var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	a.sm-tide-button-tertiary:hover,
+	button.sm-tide-button-tertiary:enabled:hover {
+	  border: 1px solid var(--tide-border-high);
+	}
+
+	a.sm-tide-button-quaternary:hover,
+	button.sm-tide-button-quaternary:enabled:hover {
+	  background: var(--tide-surface-variant);
+	}
+
+	.sm-tide-button-floating:hover,
+	button.sm-tide-button-floating:enabled:hover {
+	  background-color: var(--tide-white);
+	}
+
+	/* Disabled State */
+	button.sm-tide-button-primary:disabled,
+	button.sm-tide-button-secondary:disabled,
+	button.sm-tide-button-tertiary:disabled,
+	button.sm-tide-button-quaternary:disabled,
+	button.sm-tide-button-floating:disabled {
+	  opacity: 0.32;
+	}
+}
+
+@media (min-width: 992px) {
+	/* Rest State */
+	.md-tide-button-primary {
+	  background: var(--tide-primary);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	.md-tide-button-secondary {
+	  background: var(--tide-surface);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-primary);
+	}
+
+	.md-tide-button-tertiary {
+	  background: var(--tide-white);
+	  border: 1px solid var(--tide-border);
+	  color: var(--tide-secondary);
+	}
+
+	.md-tide-button-quaternary {
+	  background: var(--tide-white);
+	  color: var(--tide-secondary);
+	}
+
+	.md-tide-button-floating {
+	  background-color: var(--tide-transparent-100);
+	  color: var(--tide-secondary);
+	  box-shadow: var(--tide-shadow-bottom);
+	}
+
+	/* Hover State */
+	a.md-tide-button-primary:hover,
+	button.md-tide-button-primary:enabled:hover {
+	  border: 2px solid var(--tide-primary);
+	  background: var(--tide-white);
+	  color: var(--tide-primary);
+	}
+
+	a.md-tide-button-secondary:hover,
+	button.md-tide-button-secondary:enabled:hover {
+	  background: var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	a.md-tide-button-tertiary:hover,
+	button.md-tide-button-tertiary:enabled:hover {
+	  border: 1px solid var(--tide-border-high);
+	}
+
+	a.md-tide-button-quaternary:hover,
+	button.md-tide-button-quaternary:enabled:hover {
+	  background: var(--tide-surface-variant);
+	}
+
+	.md-tide-button-floating:hover,
+	button.md-tide-button-floating:enabled:hover {
+	  background-color: var(--tide-white);
+	}
+
+	/* Disabled State */
+	button.md-tide-button-primary:disabled,
+	button.md-tide-button-secondary:disabled,
+	button.md-tide-button-tertiary:disabled,
+	button.md-tide-button-quaternary:disabled,
+	button.md-tide-button-floating:disabled {
+	  opacity: 0.32;
+	}
+}
+
+@media (min-width: 1232px) {
+	/* Rest State */
+	.lg-tide-button-primary {
+	  background: var(--tide-primary);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	.lg-tide-button-secondary {
+	  background: var(--tide-surface);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-primary);
+	}
+
+	.lg-tide-button-tertiary {
+	  background: var(--tide-white);
+	  border: 1px solid var(--tide-border);
+	  color: var(--tide-secondary);
+	}
+
+	.lg-tide-button-quaternary {
+	  background: var(--tide-white);
+	  color: var(--tide-secondary);
+	}
+
+	.lg-tide-button-floating {
+	  background-color: var(--tide-transparent-100);
+	  color: var(--tide-secondary);
+	  box-shadow: var(--tide-shadow-bottom);
+	}
+
+	/* Hover State */
+	a.lg-tide-button-primary:hover,
+	button.lg-tide-button-primary:enabled:hover {
+	  border: 2px solid var(--tide-primary);
+	  background: var(--tide-white);
+	  color: var(--tide-primary);
+	}
+
+	a.lg-tide-button-secondary:hover,
+	button.lg-tide-button-secondary:enabled:hover {
+	  background: var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	a.lg-tide-button-tertiary:hover,
+	button.lg-tide-button-tertiary:enabled:hover {
+	  border: 1px solid var(--tide-border-high);
+	}
+
+	a.lg-tide-button-quaternary:hover,
+	button.lg-tide-button-quaternary:enabled:hover {
+	  background: var(--tide-surface-variant);
+	}
+
+	.lg-tide-button-floating:hover,
+	button.lg-tide-button-floating:enabled:hover {
+	  background-color: var(--tide-white);
+	}
+
+	/* Disabled State */
+	button.lg-tide-button-primary:disabled,
+	button.lg-tide-button-secondary:disabled,
+	button.lg-tide-button-tertiary:disabled,
+	button.lg-tide-button-quaternary:disabled,
+	button.lg-tide-button-floating:disabled {
+	  opacity: 0.32;
+	}
+}
+
+@media (min-width: 1920px) {
+	/* Rest State */
+	.xl-tide-button-primary {
+	  background: var(--tide-primary);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	.xl-tide-button-secondary {
+	  background: var(--tide-surface);
+	  border: 2px solid var(--tide-primary);
+	  color: var(--tide-primary);
+	}
+
+	.xl-tide-button-tertiary {
+	  background: var(--tide-white);
+	  border: 1px solid var(--tide-border);
+	  color: var(--tide-secondary);
+	}
+
+	.xl-tide-button-quaternary {
+	  background: var(--tide-white);
+	  color: var(--tide-secondary);
+	}
+
+	.xl-tide-button-floating {
+	  background-color: var(--tide-transparent-100);
+	  color: var(--tide-secondary);
+	  box-shadow: var(--tide-shadow-bottom);
+	}
+
+	/* Hover State */
+	a.xl-tide-button-primary:hover,
+	button.xl-tide-button-primary:enabled:hover {
+	  border: 2px solid var(--tide-primary);
+	  background: var(--tide-white);
+	  color: var(--tide-primary);
+	}
+
+	a.xl-tide-button-secondary:hover,
+	button.xl-tide-button-secondary:enabled:hover {
+	  background: var(--tide-primary);
+	  color: var(--tide-on-primary);
+	}
+
+	a.xl-tide-button-tertiary:hover,
+	button.xl-tide-button-tertiary:enabled:hover {
+	  border: 1px solid var(--tide-border-high);
+	}
+
+	a.xl-tide-button-quaternary:hover,
+	button.xl-tide-button-quaternary:enabled:hover {
+	  background: var(--tide-surface-variant);
+	}
+
+	.xl-tide-button-floating:hover,
+	button.xl-tide-button-floating:enabled:hover {
+	  background-color: var(--tide-white);
+	}
+
+	/* Disabled State */
+	button.xl-tide-button-primary:disabled,
+	button.xl-tide-button-secondary:disabled,
+	button.xl-tide-button-tertiary:disabled,
+	button.xl-tide-button-quaternary:disabled,
+	button.xl-tide-button-floating:disabled {
+	  opacity: 0.32;
+	}
+}

package/src/assets/css/dynamic-utilities.css

@@ -26,3 +26,126 @@
 .tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
 .tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
 .tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+@media (min-width: 768px) {
+	/* Background */
+	.sm-tide-bg-primary   {background: var(--tide-primary);}
+	.sm-tide-bg-secondary {background: var(--tide-secondary);}
+
+	.sm-tide-bg-surface                {background: var(--tide-surface);}
+	.sm-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+	.sm-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+	.sm-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+	.sm-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+	.sm-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+
+	/* Border */
+	.sm-tide-border-primary   {border-color: var(--tide-primary);}
+
+	.sm-tide-border          {border-color: var(--tide-border);}
+	.sm-tide-border-low      {border-color: var(--tide-border-low);}
+	.sm-tide-border-high     {border-color: var(--tide-border-high);}
+	.sm-tide-border-floating {border-color: var(--tide-border-floating);}
+
+	/* Foreground */
+	.sm-tide-font-on-primary   {color: var(--tide-on-primary);}
+	.sm-tide-font-on-secondary {color: var(--tide-on-secondary);}
+
+	.sm-tide-font-on-surface                 {color: var(--tide-on-surface);}
+	.sm-tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+	.sm-tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+	.sm-tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+	.sm-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+}
+
+@media (min-width: 992px) {
+	/* Background */
+	.md-tide-bg-primary   {background: var(--tide-primary);}
+	.md-tide-bg-secondary {background: var(--tide-secondary);}
+
+	.md-tide-bg-surface                {background: var(--tide-surface);}
+	.md-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+	.md-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+	.md-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+	.md-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+	.md-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+
+	/* Border */
+	.md-tide-border-primary   {border-color: var(--tide-primary);}
+
+	.md-tide-border          {border-color: var(--tide-border);}
+	.md-tide-border-low      {border-color: var(--tide-border-low);}
+	.md-tide-border-high     {border-color: var(--tide-border-high);}
+	.md-tide-border-floating {border-color: var(--tide-border-floating);}
+
+	/* Foreground */
+	.md-tide-font-on-primary   {color: var(--tide-on-primary);}
+	.md-tide-font-on-secondary {color: var(--tide-on-secondary);}
+
+	.md-tide-font-on-surface                 {color: var(--tide-on-surface);}
+	.md-tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+	.md-tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+	.md-tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+	.md-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+}
+
+@media (min-width: 1232px) {
+	/* Background */
+	.lg-tide-bg-primary   {background: var(--tide-primary);}
+	.lg-tide-bg-secondary {background: var(--tide-secondary);}
+
+	.lg-tide-bg-surface                {background: var(--tide-surface);}
+	.lg-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+	.lg-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+	.lg-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+	.lg-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+	.lg-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+
+	/* Border */
+	.lg-tide-border-primary   {border-color: var(--tide-primary);}
+
+	.lg-tide-border          {border-color: var(--tide-border);}
+	.lg-tide-border-low      {border-color: var(--tide-border-low);}
+	.lg-tide-border-high     {border-color: var(--tide-border-high);}
+	.lg-tide-border-floating {border-color: var(--tide-border-floating);}
+
+	/* Foreground */
+	.lg-tide-font-on-primary   {color: var(--tide-on-primary);}
+	.lg-tide-font-on-secondary {color: var(--tide-on-secondary);}
+
+	.lg-tide-font-on-surface                 {color: var(--tide-on-surface);}
+	.lg-tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+	.lg-tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+	.lg-tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+	.lg-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+}
+
+@media (min-width: 1920px) {
+	/* Background */
+	.xl-tide-bg-primary   {background: var(--tide-primary);}
+	.xl-tide-bg-secondary {background: var(--tide-secondary);}
+
+	.xl-tide-bg-surface                {background: var(--tide-surface);}
+	.xl-tide-bg-surface-variant        {background: var(--tide-surface-variant);}
+	.xl-tide-bg-surface-brand          {background: var(--tide-surface-brand);}
+	.xl-tide-bg-surface-accent         {background: var(--tide-surface-accent);}
+	.xl-tide-bg-surface-gradient       {background: var(--tide-surface-gradient);}
+	.xl-tide-bg-surface-floating       {background: var(--tide-surface-floating);}
+
+	/* Border */
+	.xl-tide-border-primary   {border-color: var(--tide-primary);}
+
+	.xl-tide-border          {border-color: var(--tide-border);}
+	.xl-tide-border-low      {border-color: var(--tide-border-low);}
+	.xl-tide-border-high     {border-color: var(--tide-border-high);}
+	.xl-tide-border-floating {border-color: var(--tide-border-floating);}
+
+	/* Foreground */
+	.xl-tide-font-on-primary   {color: var(--tide-on-primary);}
+	.xl-tide-font-on-secondary {color: var(--tide-on-secondary);}
+
+	.xl-tide-font-on-surface                 {color: var(--tide-on-surface);}
+	.xl-tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
+	.xl-tide-font-on-surface-brand           {color: var(--tide-on-surface-brand);}
+	.xl-tide-font-on-surface-inverse         {color: var(--tide-on-surface-inverse);}
+	.xl-tide-font-on-surface-variant-inverse {color: var(--tide-on-surface-inverse-variant);}
+}

package/src/assets/css/main.css

@@ -2,6 +2,10 @@
 @import './reset.css';
 @import './variables.css';
 @import './utilities.css';
+@import './utilities-sm.css';
+@import './utilities-md.css';
+@import './utilities-lg.css';
+@import './utilities-xl.css';
 @import './dynamic-buttons.css';
 @import './dynamic-utilities.css';
 @import './grid-layout.css';