@nationaldesignstudio/react 0.5.5 → 0.6.0

package/dist/tokens.css

@@ -464,6 +464,14 @@
   --spatial-component-testimonial-padding: 40px;
   --spatial-component-tooltip-padding-x: 10px;
   --spatial-component-tooltip-padding-y: 6px;
+  --spatial-component-video-player-caption-offset-bottom: 64px;
+  --spatial-component-video-player-caption-padding-x: 16px;
+  --spatial-component-video-player-caption-padding-y: 8px;
+  --spatial-component-video-player-close-button-offset: 16px;
+  --spatial-component-video-player-close-button-size: 40px;
+  --spatial-component-video-player-controls-gap: 12px;
+  --spatial-component-video-player-controls-height: 48px;
+  --spatial-component-video-player-controls-padding: 16px;
   --spatial-grid-large-columns: 24;
   --spatial-grid-large-gutter: 24px;
   --spatial-grid-large-margin: 72px;
@@ -1031,6 +1039,14 @@
   --spatial-component-testimonial-padding: var(--spatial-component-testimonial-padding);
   --spatial-component-tooltip-padding-x: var(--spatial-component-tooltip-padding-x);
   --spatial-component-tooltip-padding-y: var(--spatial-component-tooltip-padding-y);
+  --spatial-component-video-player-caption-offset-bottom: var(--spatial-component-video-player-caption-offset-bottom);
+  --spatial-component-video-player-caption-padding-x: var(--spatial-component-video-player-caption-padding-x);
+  --spatial-component-video-player-caption-padding-y: var(--spatial-component-video-player-caption-padding-y);
+  --spatial-component-video-player-close-button-offset: var(--spatial-component-video-player-close-button-offset);
+  --spatial-component-video-player-close-button-size: var(--spatial-component-video-player-close-button-size);
+  --spatial-component-video-player-controls-gap: var(--spatial-component-video-player-controls-gap);
+  --spatial-component-video-player-controls-height: var(--spatial-component-video-player-controls-height);
+  --spatial-component-video-player-controls-padding: var(--spatial-component-video-player-controls-padding);
   --spatial-grid-large-columns: var(--spatial-grid-large-columns);
   --spatial-grid-large-gutter: var(--spatial-grid-large-gutter);
   --spatial-grid-large-margin: var(--spatial-grid-large-margin);
@@ -1288,6 +1304,18 @@
   --color-ui-menu-item-bg: var(--color-white);
   --color-ui-menu-item-text-selected: var(--color-blue-v250);
   --color-ui-menu-item-text: var(--color-gray-1000);
+  --color-video-player-backdrop-overlay: var(--color-alpha-black-90);
+  --color-video-player-button-bg-active: var(--color-alpha-white-30);
+  --color-video-player-button-bg-hover: var(--color-alpha-white-20);
+  --color-video-player-button-bg: var(--color-alpha-white-10);
+  --color-video-player-caption-bg: var(--color-alpha-black-70);
+  --color-video-player-caption-text: var(--color-white);
+  --color-video-player-controls-bg: var(--color-alpha-black-40);
+  --color-video-player-controls-hover: var(--color-alpha-white-20);
+  --color-video-player-controls-text: var(--color-white);
+  --color-video-player-progress-bg: var(--color-alpha-white-30);
+  --color-video-player-progress-fill: var(--color-white);
+  --color-video-player-tooltip-bg: var(--color-alpha-black-90);
   --radius-surface-button-large: var(--radius-8);
   --radius-surface-button-medium: var(--radius-6);
   --radius-surface-button-small: var(--radius-4);
@@ -1375,6 +1403,18 @@
   --color-ui-menu-item-bg: var(--color-ui-menu-item-bg);
   --color-ui-menu-item-text-selected: var(--color-ui-menu-item-text-selected);
   --color-ui-menu-item-text: var(--color-ui-menu-item-text);
+  --color-video-player-backdrop-overlay: var(--color-video-player-backdrop-overlay);
+  --color-video-player-button-bg-active: var(--color-video-player-button-bg-active);
+  --color-video-player-button-bg-hover: var(--color-video-player-button-bg-hover);
+  --color-video-player-button-bg: var(--color-video-player-button-bg);
+  --color-video-player-caption-bg: var(--color-video-player-caption-bg);
+  --color-video-player-caption-text: var(--color-video-player-caption-text);
+  --color-video-player-controls-bg: var(--color-video-player-controls-bg);
+  --color-video-player-controls-hover: var(--color-video-player-controls-hover);
+  --color-video-player-controls-text: var(--color-video-player-controls-text);
+  --color-video-player-progress-bg: var(--color-video-player-progress-bg);
+  --color-video-player-progress-fill: var(--color-video-player-progress-fill);
+  --color-video-player-tooltip-bg: var(--color-video-player-tooltip-bg);
   --radius-surface-button-large: var(--radius-surface-button-large);
   --radius-surface-button-medium: var(--radius-surface-button-medium);
   --radius-surface-button-small: var(--radius-surface-button-small);
@@ -4462,6 +4502,646 @@
   margin-left: var(--spatial-component-tooltip-padding-y);
 }
 
+@utility w-spatial-component-video-player-caption-offset-bottom {
+  width: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility h-spatial-component-video-player-caption-offset-bottom {
+  height: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility gap-spatial-component-video-player-caption-offset-bottom {
+  gap: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility gap-x-spatial-component-video-player-caption-offset-bottom {
+  column-gap: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility gap-y-spatial-component-video-player-caption-offset-bottom {
+  row-gap: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility p-spatial-component-video-player-caption-offset-bottom {
+  padding: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility px-spatial-component-video-player-caption-offset-bottom {
+  padding-left: var(--spatial-component-video-player-caption-offset-bottom);
+  padding-right: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility py-spatial-component-video-player-caption-offset-bottom {
+  padding-top: var(--spatial-component-video-player-caption-offset-bottom);
+  padding-bottom: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility pt-spatial-component-video-player-caption-offset-bottom {
+  padding-top: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility pr-spatial-component-video-player-caption-offset-bottom {
+  padding-right: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility pb-spatial-component-video-player-caption-offset-bottom {
+  padding-bottom: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility pl-spatial-component-video-player-caption-offset-bottom {
+  padding-left: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility m-spatial-component-video-player-caption-offset-bottom {
+  margin: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility mx-spatial-component-video-player-caption-offset-bottom {
+  margin-left: var(--spatial-component-video-player-caption-offset-bottom);
+  margin-right: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility my-spatial-component-video-player-caption-offset-bottom {
+  margin-top: var(--spatial-component-video-player-caption-offset-bottom);
+  margin-bottom: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility mt-spatial-component-video-player-caption-offset-bottom {
+  margin-top: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility mr-spatial-component-video-player-caption-offset-bottom {
+  margin-right: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility mb-spatial-component-video-player-caption-offset-bottom {
+  margin-bottom: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility ml-spatial-component-video-player-caption-offset-bottom {
+  margin-left: var(--spatial-component-video-player-caption-offset-bottom);
+}
+
+@utility w-spatial-component-video-player-caption-padding-x {
+  width: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility h-spatial-component-video-player-caption-padding-x {
+  height: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility gap-spatial-component-video-player-caption-padding-x {
+  gap: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility gap-x-spatial-component-video-player-caption-padding-x {
+  column-gap: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility gap-y-spatial-component-video-player-caption-padding-x {
+  row-gap: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility p-spatial-component-video-player-caption-padding-x {
+  padding: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility px-spatial-component-video-player-caption-padding-x {
+  padding-left: var(--spatial-component-video-player-caption-padding-x);
+  padding-right: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility py-spatial-component-video-player-caption-padding-x {
+  padding-top: var(--spatial-component-video-player-caption-padding-x);
+  padding-bottom: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility pt-spatial-component-video-player-caption-padding-x {
+  padding-top: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility pr-spatial-component-video-player-caption-padding-x {
+  padding-right: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility pb-spatial-component-video-player-caption-padding-x {
+  padding-bottom: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility pl-spatial-component-video-player-caption-padding-x {
+  padding-left: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility m-spatial-component-video-player-caption-padding-x {
+  margin: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility mx-spatial-component-video-player-caption-padding-x {
+  margin-left: var(--spatial-component-video-player-caption-padding-x);
+  margin-right: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility my-spatial-component-video-player-caption-padding-x {
+  margin-top: var(--spatial-component-video-player-caption-padding-x);
+  margin-bottom: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility mt-spatial-component-video-player-caption-padding-x {
+  margin-top: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility mr-spatial-component-video-player-caption-padding-x {
+  margin-right: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility mb-spatial-component-video-player-caption-padding-x {
+  margin-bottom: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility ml-spatial-component-video-player-caption-padding-x {
+  margin-left: var(--spatial-component-video-player-caption-padding-x);
+}
+
+@utility w-spatial-component-video-player-caption-padding-y {
+  width: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility h-spatial-component-video-player-caption-padding-y {
+  height: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility gap-spatial-component-video-player-caption-padding-y {
+  gap: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility gap-x-spatial-component-video-player-caption-padding-y {
+  column-gap: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility gap-y-spatial-component-video-player-caption-padding-y {
+  row-gap: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility p-spatial-component-video-player-caption-padding-y {
+  padding: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility px-spatial-component-video-player-caption-padding-y {
+  padding-left: var(--spatial-component-video-player-caption-padding-y);
+  padding-right: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility py-spatial-component-video-player-caption-padding-y {
+  padding-top: var(--spatial-component-video-player-caption-padding-y);
+  padding-bottom: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility pt-spatial-component-video-player-caption-padding-y {
+  padding-top: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility pr-spatial-component-video-player-caption-padding-y {
+  padding-right: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility pb-spatial-component-video-player-caption-padding-y {
+  padding-bottom: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility pl-spatial-component-video-player-caption-padding-y {
+  padding-left: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility m-spatial-component-video-player-caption-padding-y {
+  margin: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility mx-spatial-component-video-player-caption-padding-y {
+  margin-left: var(--spatial-component-video-player-caption-padding-y);
+  margin-right: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility my-spatial-component-video-player-caption-padding-y {
+  margin-top: var(--spatial-component-video-player-caption-padding-y);
+  margin-bottom: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility mt-spatial-component-video-player-caption-padding-y {
+  margin-top: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility mr-spatial-component-video-player-caption-padding-y {
+  margin-right: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility mb-spatial-component-video-player-caption-padding-y {
+  margin-bottom: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility ml-spatial-component-video-player-caption-padding-y {
+  margin-left: var(--spatial-component-video-player-caption-padding-y);
+}
+
+@utility w-spatial-component-video-player-close-button-offset {
+  width: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility h-spatial-component-video-player-close-button-offset {
+  height: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility gap-spatial-component-video-player-close-button-offset {
+  gap: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility gap-x-spatial-component-video-player-close-button-offset {
+  column-gap: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility gap-y-spatial-component-video-player-close-button-offset {
+  row-gap: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility p-spatial-component-video-player-close-button-offset {
+  padding: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility px-spatial-component-video-player-close-button-offset {
+  padding-left: var(--spatial-component-video-player-close-button-offset);
+  padding-right: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility py-spatial-component-video-player-close-button-offset {
+  padding-top: var(--spatial-component-video-player-close-button-offset);
+  padding-bottom: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility pt-spatial-component-video-player-close-button-offset {
+  padding-top: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility pr-spatial-component-video-player-close-button-offset {
+  padding-right: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility pb-spatial-component-video-player-close-button-offset {
+  padding-bottom: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility pl-spatial-component-video-player-close-button-offset {
+  padding-left: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility m-spatial-component-video-player-close-button-offset {
+  margin: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility mx-spatial-component-video-player-close-button-offset {
+  margin-left: var(--spatial-component-video-player-close-button-offset);
+  margin-right: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility my-spatial-component-video-player-close-button-offset {
+  margin-top: var(--spatial-component-video-player-close-button-offset);
+  margin-bottom: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility mt-spatial-component-video-player-close-button-offset {
+  margin-top: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility mr-spatial-component-video-player-close-button-offset {
+  margin-right: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility mb-spatial-component-video-player-close-button-offset {
+  margin-bottom: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility ml-spatial-component-video-player-close-button-offset {
+  margin-left: var(--spatial-component-video-player-close-button-offset);
+}
+
+@utility w-spatial-component-video-player-close-button-size {
+  width: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility h-spatial-component-video-player-close-button-size {
+  height: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility gap-spatial-component-video-player-close-button-size {
+  gap: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility gap-x-spatial-component-video-player-close-button-size {
+  column-gap: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility gap-y-spatial-component-video-player-close-button-size {
+  row-gap: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility p-spatial-component-video-player-close-button-size {
+  padding: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility px-spatial-component-video-player-close-button-size {
+  padding-left: var(--spatial-component-video-player-close-button-size);
+  padding-right: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility py-spatial-component-video-player-close-button-size {
+  padding-top: var(--spatial-component-video-player-close-button-size);
+  padding-bottom: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility pt-spatial-component-video-player-close-button-size {
+  padding-top: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility pr-spatial-component-video-player-close-button-size {
+  padding-right: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility pb-spatial-component-video-player-close-button-size {
+  padding-bottom: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility pl-spatial-component-video-player-close-button-size {
+  padding-left: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility m-spatial-component-video-player-close-button-size {
+  margin: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility mx-spatial-component-video-player-close-button-size {
+  margin-left: var(--spatial-component-video-player-close-button-size);
+  margin-right: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility my-spatial-component-video-player-close-button-size {
+  margin-top: var(--spatial-component-video-player-close-button-size);
+  margin-bottom: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility mt-spatial-component-video-player-close-button-size {
+  margin-top: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility mr-spatial-component-video-player-close-button-size {
+  margin-right: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility mb-spatial-component-video-player-close-button-size {
+  margin-bottom: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility ml-spatial-component-video-player-close-button-size {
+  margin-left: var(--spatial-component-video-player-close-button-size);
+}
+
+@utility w-spatial-component-video-player-controls-gap {
+  width: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility h-spatial-component-video-player-controls-gap {
+  height: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility gap-spatial-component-video-player-controls-gap {
+  gap: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility gap-x-spatial-component-video-player-controls-gap {
+  column-gap: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility gap-y-spatial-component-video-player-controls-gap {
+  row-gap: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility p-spatial-component-video-player-controls-gap {
+  padding: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility px-spatial-component-video-player-controls-gap {
+  padding-left: var(--spatial-component-video-player-controls-gap);
+  padding-right: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility py-spatial-component-video-player-controls-gap {
+  padding-top: var(--spatial-component-video-player-controls-gap);
+  padding-bottom: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility pt-spatial-component-video-player-controls-gap {
+  padding-top: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility pr-spatial-component-video-player-controls-gap {
+  padding-right: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility pb-spatial-component-video-player-controls-gap {
+  padding-bottom: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility pl-spatial-component-video-player-controls-gap {
+  padding-left: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility m-spatial-component-video-player-controls-gap {
+  margin: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility mx-spatial-component-video-player-controls-gap {
+  margin-left: var(--spatial-component-video-player-controls-gap);
+  margin-right: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility my-spatial-component-video-player-controls-gap {
+  margin-top: var(--spatial-component-video-player-controls-gap);
+  margin-bottom: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility mt-spatial-component-video-player-controls-gap {
+  margin-top: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility mr-spatial-component-video-player-controls-gap {
+  margin-right: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility mb-spatial-component-video-player-controls-gap {
+  margin-bottom: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility ml-spatial-component-video-player-controls-gap {
+  margin-left: var(--spatial-component-video-player-controls-gap);
+}
+
+@utility w-spatial-component-video-player-controls-height {
+  width: var(--spatial-component-video-player-controls-height);
+}
+
+@utility h-spatial-component-video-player-controls-height {
+  height: var(--spatial-component-video-player-controls-height);
+}
+
+@utility gap-spatial-component-video-player-controls-height {
+  gap: var(--spatial-component-video-player-controls-height);
+}
+
+@utility gap-x-spatial-component-video-player-controls-height {
+  column-gap: var(--spatial-component-video-player-controls-height);
+}
+
+@utility gap-y-spatial-component-video-player-controls-height {
+  row-gap: var(--spatial-component-video-player-controls-height);
+}
+
+@utility p-spatial-component-video-player-controls-height {
+  padding: var(--spatial-component-video-player-controls-height);
+}
+
+@utility px-spatial-component-video-player-controls-height {
+  padding-left: var(--spatial-component-video-player-controls-height);
+  padding-right: var(--spatial-component-video-player-controls-height);
+}
+
+@utility py-spatial-component-video-player-controls-height {
+  padding-top: var(--spatial-component-video-player-controls-height);
+  padding-bottom: var(--spatial-component-video-player-controls-height);
+}
+
+@utility pt-spatial-component-video-player-controls-height {
+  padding-top: var(--spatial-component-video-player-controls-height);
+}
+
+@utility pr-spatial-component-video-player-controls-height {
+  padding-right: var(--spatial-component-video-player-controls-height);
+}
+
+@utility pb-spatial-component-video-player-controls-height {
+  padding-bottom: var(--spatial-component-video-player-controls-height);
+}
+
+@utility pl-spatial-component-video-player-controls-height {
+  padding-left: var(--spatial-component-video-player-controls-height);
+}
+
+@utility m-spatial-component-video-player-controls-height {
+  margin: var(--spatial-component-video-player-controls-height);
+}
+
+@utility mx-spatial-component-video-player-controls-height {
+  margin-left: var(--spatial-component-video-player-controls-height);
+  margin-right: var(--spatial-component-video-player-controls-height);
+}
+
+@utility my-spatial-component-video-player-controls-height {
+  margin-top: var(--spatial-component-video-player-controls-height);
+  margin-bottom: var(--spatial-component-video-player-controls-height);
+}
+
+@utility mt-spatial-component-video-player-controls-height {
+  margin-top: var(--spatial-component-video-player-controls-height);
+}
+
+@utility mr-spatial-component-video-player-controls-height {
+  margin-right: var(--spatial-component-video-player-controls-height);
+}
+
+@utility mb-spatial-component-video-player-controls-height {
+  margin-bottom: var(--spatial-component-video-player-controls-height);
+}
+
+@utility ml-spatial-component-video-player-controls-height {
+  margin-left: var(--spatial-component-video-player-controls-height);
+}
+
+@utility w-spatial-component-video-player-controls-padding {
+  width: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility h-spatial-component-video-player-controls-padding {
+  height: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility gap-spatial-component-video-player-controls-padding {
+  gap: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility gap-x-spatial-component-video-player-controls-padding {
+  column-gap: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility gap-y-spatial-component-video-player-controls-padding {
+  row-gap: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility p-spatial-component-video-player-controls-padding {
+  padding: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility px-spatial-component-video-player-controls-padding {
+  padding-left: var(--spatial-component-video-player-controls-padding);
+  padding-right: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility py-spatial-component-video-player-controls-padding {
+  padding-top: var(--spatial-component-video-player-controls-padding);
+  padding-bottom: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility pt-spatial-component-video-player-controls-padding {
+  padding-top: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility pr-spatial-component-video-player-controls-padding {
+  padding-right: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility pb-spatial-component-video-player-controls-padding {
+  padding-bottom: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility pl-spatial-component-video-player-controls-padding {
+  padding-left: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility m-spatial-component-video-player-controls-padding {
+  margin: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility mx-spatial-component-video-player-controls-padding {
+  margin-left: var(--spatial-component-video-player-controls-padding);
+  margin-right: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility my-spatial-component-video-player-controls-padding {
+  margin-top: var(--spatial-component-video-player-controls-padding);
+  margin-bottom: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility mt-spatial-component-video-player-controls-padding {
+  margin-top: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility mr-spatial-component-video-player-controls-padding {
+  margin-right: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility mb-spatial-component-video-player-controls-padding {
+  margin-bottom: var(--spatial-component-video-player-controls-padding);
+}
+
+@utility ml-spatial-component-video-player-controls-padding {
+  margin-left: var(--spatial-component-video-player-controls-padding);
+}
+
 @utility w-spatial-grid-large-gutter {
   width: var(--spatial-grid-large-gutter);
 }