@react95/core 8.0.0-alpha.0 → 8.0.0-alpha.2

package/cjs/Video/Video.css.js

@@ -1,106 +1,22 @@
+require('./Video.css.ts.vanilla.css');
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.videoTag = exports.videoFont = exports.range = exports.elapsedTime = exports.divider = exports.currentTime = exports.countDownContainer = exports.controls = exports.controlBtn = void 0;
-var _css = require("@vanilla-extract/css");
-var _recipes = require("@vanilla-extract/recipes");
-var _contract = require("../themes/contract.css");
-var _GlobalStyle = require("../GlobalStyle/GlobalStyle.css");
-var _cssUtils = require("@vanilla-extract/css-utils");
-var videoTag = exports.videoTag = (0, _recipes.recipe)({
-  base: {
-    width: '100%',
-    padding: _contract.contract.space[2]
-  },
-  variants: {
-    visible: {
-      "true": {
-        display: 'block'
-      },
-      "false": {
-        display: 'none'
-      }
-    }
-  }
-});
-var controls = exports.controls = (0, _css.style)({
-  display: 'flex',
-  alignItems: 'center',
-  paddingTop: _contract.contract.space[2],
-  paddingBottom: _contract.contract.space[2]
-});
-var countDownContainer = exports.countDownContainer = (0, _css.style)({
-  display: 'flex',
-  padding: _contract.contract.space[6],
-  marginBottom: _contract.contract.space[4],
-  boxShadow: _contract.contract.shadows["in"],
-  backgroundColor: _contract.contract.colors.canvas,
-  height: '50px',
-  color: _contract.contract.colors.canvasText
-});
-var videoFont = exports.videoFont = (0, _css.style)({
-  fontFamily: _GlobalStyle.R95VideoNumbers,
-  textTransform: 'uppercase'
-});
-var currentTime = exports.currentTime = (0, _css.style)({
-  marginTop: 'auto',
-  fontSize: 22
-});
-var elapsedTime = exports.elapsedTime = (0, _css.style)({
-  height: _contract.contract.space[12]
-});
-var divider = exports.divider = (0, _css.style)({
-  display: 'block',
-  height: _contract.contract.space[1],
-  borderTopStyle: 'solid',
-  borderTopWidth: _contract.contract.space[1],
-  borderTopColor: _contract.contract.colors.borderDark,
-  borderBottomWidth: _contract.contract.space[1],
-  borderBottomStyle: 'solid',
-  borderBottomColor: _contract.contract.colors.borderLightest,
-  marginBottom: _contract.contract.space[2]
-});
-var controlBtn = exports.controlBtn = (0, _css.style)({
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: _contract.contract.space[20],
-  height: _contract.contract.space[20],
-  padding: _contract.contract.space[7],
-  selectors: {
-    '&:active, &:focus': {
-      width: _contract.contract.space[20],
-      height: _contract.contract.space[20],
-      padding: _contract.contract.space[7]
-    },
-    '&:disabled': {
-      padding: _contract.contract.space[4]
-    }
-  }
-});
-(0, _css.globalStyle)("".concat(controlBtn, " svg"), {
-  fill: _contract.contract.colors.materialText
-});
-(0, _css.globalStyle)("".concat(controlBtn, ":disabled svg"), {
-  fill: _contract.contract.colors.borderDark,
-  borderBottomWidth: _contract.contract.space[1],
-  borderBottomStyle: 'solid',
-  borderBottomColor: _contract.contract.colors.borderLightest,
-  borderRightWidth: _contract.contract.space[1],
-  borderRightStyle: 'solid',
-  borderRightColor: _contract.contract.colors.borderLightest
-});
-var range = exports.range = (0, _css.style)({
-  selectors: {
-    '&::-webkit-slider-thumb': {
-      height: _contract.contract.space[18],
-      marginTop: _cssUtils.calc.negate(_contract.contract.space[7]),
-      width: _contract.contract.space[10]
-    },
-    "&[value='0']::-webkit-slider-thumb": {
-      marginLeft: _cssUtils.calc.negate(_contract.contract.space[2])
-    }
-  }
-});
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                            */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var controlBtn = "r95_13gnpv09";
+var controls = "r95_13gnpv03";
+var countDownContainer = "r95_13gnpv04";
+var currentTime = "r95_13gnpv06";
+var divider = "r95_13gnpv08";
+var elapsedTime = "r95_13gnpv07";
+var range = "r95_13gnpv0a";
+var videoFont = "r95_13gnpv05";
+var videoTag = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_13gnpv00", variantClassNames: { visible: { true: "r95_13gnpv01", false: "r95_13gnpv02" } }, defaultVariants: {}, compoundVariants: [] });
+exports.controlBtn = controlBtn;
+exports.controls = controls;
+exports.countDownContainer = countDownContainer;
+exports.currentTime = currentTime;
+exports.divider = divider;
+exports.elapsedTime = elapsedTime;
+exports.range = range;
+exports.videoFont = videoFont;
+exports.videoTag = videoTag;

package/cjs/Video/Video.css.ts.vanilla.css

@@ -0,0 +1,83 @@
+.r95_13gnpv00 {
+  width: 100%;
+  padding: var(--r95-space-2);
+}
+.r95_13gnpv01 {
+  display: block;
+}
+.r95_13gnpv02 {
+  display: none;
+}
+.r95_13gnpv03 {
+  display: flex;
+  align-items: center;
+  padding-top: var(--r95-space-2);
+  padding-bottom: var(--r95-space-2);
+}
+.r95_13gnpv04 {
+  display: flex;
+  padding: var(--r95-space-6);
+  margin-bottom: var(--r95-space-4);
+  box-shadow: var(--r95-shadow-in);
+  background-color: var(--r95-color-canvas);
+  height: 50px;
+  color: var(--r95-color-canvasText);
+}
+.r95_13gnpv05 {
+  font-family: React95Video-Numbers;
+  text-transform: uppercase;
+}
+.r95_13gnpv06 {
+  margin-top: auto;
+  font-size: 22px;
+}
+.r95_13gnpv07 {
+  height: var(--r95-space-12);
+}
+.r95_13gnpv08 {
+  display: block;
+  height: var(--r95-space-1);
+  border-top-style: solid;
+  border-top-width: var(--r95-space-1);
+  border-top-color: var(--r95-color-borderDark);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-style: solid;
+  border-bottom-color: var(--r95-color-borderLightest);
+  margin-bottom: var(--r95-space-2);
+}
+.r95_13gnpv09 {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--r95-space-20);
+  height: var(--r95-space-20);
+  padding: var(--r95-space-7);
+}
+.r95_13gnpv09:active, .r95_13gnpv09:focus {
+  width: var(--r95-space-20);
+  height: var(--r95-space-20);
+  padding: var(--r95-space-7);
+}
+.r95_13gnpv09:disabled {
+  padding: var(--r95-space-4);
+}
+.r95_13gnpv09 svg {
+  fill: var(--r95-color-materialText);
+}
+.r95_13gnpv09:disabled svg {
+  fill: var(--r95-color-borderDark);
+  border-bottom-width: var(--r95-space-1);
+  border-bottom-style: solid;
+  border-bottom-color: var(--r95-color-borderLightest);
+  border-right-width: var(--r95-space-1);
+  border-right-style: solid;
+  border-right-color: var(--r95-color-borderLightest);
+}
+.r95_13gnpv0a::-webkit-slider-thumb {
+  height: var(--r95-space-18);
+  margin-top: calc(var(--r95-space-7) * -1);
+  width: var(--r95-space-10);
+}
+.r95_13gnpv0a[value='0']::-webkit-slider-thumb {
+  margin-left: calc(var(--r95-space-2) * -1);
+}