tide-design-system 2.2.16 → 2.3.1

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

@@ -1,346 +0,0 @@
-/* Rest State */
-.tide-button-primary {
-  background: var(--tide-primary);
-  border: 2px solid var(--tide-primary);
-  color: var(--tide-on-primary);
-}
-
-.tide-button-secondary {
-  background: var(--tide-surface);
-  border: 2px solid var(--tide-primary);
-  color: var(--tide-primary);
-}
-
-.tide-button-tertiary {
-  background: var(--tide-white);
-  border: 1px solid var(--tide-border);
-  color: var(--tide-secondary);
-}
-
-.tide-button-quaternary {
-  background: var(--tide-white);
-  color: var(--tide-secondary);
-}
-
-.tide-button-floating {
-  background-color: var(--tide-transparent-100);
-  color: var(--tide-secondary);
-  box-shadow: var(--tide-shadow-bottom);
-}
-
-/* Hover State */
-a.tide-button-primary:hover,
-button.tide-button-primary:enabled:hover {
-  border: 2px solid var(--tide-primary);
-  background: var(--tide-white);
-  color: var(--tide-primary);
-}
-
-a.tide-button-secondary:hover,
-button.tide-button-secondary:enabled:hover {
-  background: var(--tide-primary);
-  color: var(--tide-on-primary);
-}
-
-a.tide-button-tertiary:hover,
-button.tide-button-tertiary:enabled:hover {
-  border: 1px solid var(--tide-border-high);
-}
-
-a.tide-button-quaternary:hover,
-button.tide-button-quaternary:enabled:hover {
-  background: var(--tide-surface-variant);
-}
-
-.tide-button-floating:hover,
-button.tide-button-floating:enabled:hover {
-  background-color: var(--tide-white);
-}
-
-/* Disabled State */
-button.tide-button-primary:disabled,
-button.tide-button-secondary:disabled,
-button.tide-button-tertiary:disabled,
-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

@@ -1,152 +0,0 @@
-/* Background */
-.tide-bg-primary   {background: var(--tide-primary);}
-.tide-bg-secondary {background: var(--tide-secondary);}
-
-.tide-bg-surface          {background: var(--tide-surface);}
-.tide-bg-surface-variant  {background: var(--tide-surface-variant);}
-.tide-bg-surface-brand    {background: var(--tide-surface-brand);}
-.tide-bg-surface-accent   {background: var(--tide-surface-accent);}
-.tide-bg-surface-gradient {background: var(--tide-surface-gradient);}
-.tide-bg-surface-floating {background: var(--tide-surface-floating);}
-
-/* Border */
-.tide-border-primary   {border-color: var(--tide-primary);}
-
-.tide-border          {border-color: var(--tide-border);}
-.tide-border-low      {border-color: var(--tide-border-low);}
-.tide-border-high     {border-color: var(--tide-border-high);}
-.tide-border-floating {border-color: var(--tide-border-floating);}
-
-/* Foreground */
-.tide-font-on-primary   {color: var(--tide-on-primary);}
-.tide-font-on-secondary {color: var(--tide-on-secondary);}
-
-.tide-font-on-surface                 {color: var(--tide-on-surface);}
-.tide-font-on-surface-variant         {color: var(--tide-on-surface-variant);}
-.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);}
-}