@fluentui/web-components 3.0.0-beta.5 → 3.0.0-beta.7

package/dist/esm/text-input/text-input.styles.js

@@ -8,18 +8,18 @@ export const styles = css `
   ${display('block')}
 
   :host {
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase300});
     max-width: 400px;
   }
   .label {
     display: flex;
-    color: ${colorNeutralForeground1};
-    padding-bottom: ${spacingVerticalXS};
+    color: var(${colorNeutralForeground1});
+    padding-bottom: var(${spacingVerticalXS});
     flex-shrink: 0;
-    padding-inline-end: ${spacingHorizontalXS};
+    padding-inline-end: var(${spacingHorizontalXS});
   }
   .label__hidden {
     display: none;
@@ -32,11 +32,11 @@ export const styles = css `
     align-items: center;
     flex-direction: row;
     width: 100%;
-    padding: 0 ${spacingHorizontalMNudge};
-    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
-    border-bottom-color: ${colorNeutralStrokeAccessible};
-    border-radius: ${borderRadiusMedium};
-    gap: ${spacingHorizontalXXS};
+    padding: 0 var(${spacingHorizontalMNudge});
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke1});
+    border-bottom-color: var(${colorNeutralStrokeAccessible});
+    border-radius: var(${borderRadiusMedium});
+    gap: var(${spacingHorizontalXXS});
   }
   .root::after {
     box-sizing: border-box;
@@ -45,25 +45,25 @@ export const styles = css `
     left: -1px;
     bottom: 0px;
     right: -1px;
-    height: max(2px, ${borderRadiusMedium});
-    border-radius: 0 0 ${borderRadiusMedium} ${borderRadiusMedium};
-    border-bottom: 2px solid ${colorCompoundBrandStroke};
+    height: max(2px, var(${borderRadiusMedium}));
+    border-radius: 0 0 var(${borderRadiusMedium}) var(${borderRadiusMedium});
+    border-bottom: 2px solid var(${colorCompoundBrandStroke});
     clip-path: inset(calc(100% - 2px) 1px 0px);
     transform: scaleX(0);
     transition-property: transform;
-    transition-duration: ${durationUltraFast};
-    transition-delay: ${curveAccelerateMid};
+    transition-duration: var(${durationUltraFast});
+    transition-delay: var(${curveAccelerateMid});
   }
   .control {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    color: ${colorNeutralForeground1};
-    border-radius: ${borderRadiusMedium};
-    background: ${colorTransparentBackground};
-    font-family: ${fontFamilyBase};
-    font-weight: ${fontWeightRegular};
-    font-size: ${fontSizeBase300};
+    color: var(${colorNeutralForeground1});
+    border-radius: var(${borderRadiusMedium});
+    background: var(${colorTransparentBackground});
+    font-family: var(${fontFamilyBase});
+    font-weight: var(${fontWeightRegular});
+    font-size: var(${fontSizeBase300});
     border: none;
     background: transparent;
     vertical-align: center;
@@ -73,29 +73,29 @@ export const styles = css `
     border: 0;
   }
   .control::placeholder {
-    color: ${colorNeutralForeground4};
+    color: var(${colorNeutralForeground4});
   }
   :host ::slotted([slot='start']),
   :host ::slotted([slot='end']) {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${colorNeutralForeground3};
-    font-size: ${fontSizeBase500};
+    color: var(${colorNeutralForeground3});
+    font-size: var(${fontSizeBase500});
   }
   :host ::slotted([slot='start']) {
-    padding-right: ${spacingHorizontalXXS};
+    padding-right: var(${spacingHorizontalXXS});
   }
   :host ::slotted([slot='end']) {
-    padding-left: ${spacingHorizontalXXS};
-    gap: ${spacingHorizontalXS};
+    padding-left: var(${spacingHorizontalXXS});
+    gap: var(${spacingHorizontalXS});
   }
   :host(:hover) .root {
-    border-color: ${colorNeutralStroke1Hover};
-    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
+    border-color: var(${colorNeutralStroke1Hover});
+    border-bottom-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host(:active) .root {
-    border-color: ${colorNeutralStroke1Pressed};
+    border-color: var(${colorNeutralStroke1Pressed});
   }
   :host(:focus-within) .root {
     outline: transparent solid 2px;
@@ -104,97 +104,97 @@ export const styles = css `
   :host(:focus-within) .root::after {
     transform: scaleX(1);
     transition-property: transform;
-    transition-duration: ${durationNormal};
-    transition-delay: ${curveDecelerateMid};
+    transition-duration: var(${durationNormal});
+    transition-delay: var(${curveDecelerateMid});
   }
   :host(:focus-within:active) .root:after {
-    border-bottom-color: ${colorCompoundBrandStrokePressed};
+    border-bottom-color: var(${colorCompoundBrandStrokePressed});
   }
   :host([appearance='outline']:focus-within) .root {
-    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke1});
   }
   :host(:focus-within) .control {
-    color: ${colorNeutralForeground1};
+    color: var(${colorNeutralForeground1});
   }
   :host([disabled]) .root {
-    background: ${colorTransparentBackground};
-    border: ${strokeWidthThin} solid ${colorNeutralStrokeDisabled};
+    background: var(${colorTransparentBackground});
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStrokeDisabled});
   }
   :host([disabled]) .control::placeholder,
   :host([disabled]) ::slotted([slot='start']),
   :host([disabled]) ::slotted([slot='end']) {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
   ::selection {
-    color: ${colorNeutralForegroundInverted};
-    background-color: ${colorNeutralBackgroundInverted};
+    color: var(${colorNeutralForegroundInverted});
+    background-color: var(${colorNeutralBackgroundInverted});
   }
   :host([control-size='small']) .control {
-    font-size: ${fontSizeBase200};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase200};
+    font-size: var(${fontSizeBase200});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase200});
   }
   :host([control-size='small']) .root {
     height: 24px;
-    gap: ${spacingHorizontalXXS};
-    padding: 0 ${spacingHorizontalSNudge};
+    gap: var(${spacingHorizontalXXS});
+    padding: 0 var(${spacingHorizontalSNudge});
   }
   :host([control-size='small']) ::slotted([slot='start']),
   :host([control-size='small']) ::slotted([slot='end']) {
-    font-size: ${fontSizeBase400};
+    font-size: var(${fontSizeBase400});
   }
   :host([control-size='large']) .control {
-    font-size: ${fontSizeBase400};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase400};
+    font-size: var(${fontSizeBase400});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase400});
   }
   :host([control-size='large']) .root {
     height: 40px;
-    gap: ${spacingHorizontalS};
-    padding: 0 ${spacingHorizontalM};
+    gap: var(${spacingHorizontalS});
+    padding: 0 var(${spacingHorizontalM});
   }
   :host([control-size='large']) ::slotted([slot='start']),
   :host([control-size='large']) ::slotted([slot='end']) {
-    font-size: ${fontSizeBase600};
+    font-size: var(${fontSizeBase600});
   }
   :host([appearance='underline']) .root {
-    background: ${colorTransparentBackground};
+    background: var(${colorTransparentBackground});
     border: 0;
     border-radius: 0;
-    border-bottom: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
+    border-bottom: var(${strokeWidthThin}) solid var(${colorNeutralStrokeAccessible});
   }
   :host([appearance='underline']:hover) .root {
-    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
+    border-bottom-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host([appearance='underline']:active) .root {
-    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
+    border-bottom-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host([appearance='underline']:focus-within) .root {
     border: 0;
-    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
+    border-bottom-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host([appearance='underline'][disabled]) .root {
-    border-bottom-color: ${colorNeutralStrokeDisabled};
+    border-bottom-color: var(${colorNeutralStrokeDisabled});
   }
   :host([appearance='filled-lighter']) .root,
   :host([appearance='filled-darker']) .root {
-    border: ${strokeWidthThin} solid ${colorTransparentStroke};
-    box-shadow: ${shadow2};
+    border: var(${strokeWidthThin}) solid var(${colorTransparentStroke});
+    box-shadow: var(${shadow2});
   }
   :host([appearance='filled-lighter']) .root {
-    background: ${colorNeutralBackground1};
+    background: var(${colorNeutralBackground1});
   }
   :host([appearance='filled-darker']) .root {
-    background: ${colorNeutralBackground3};
+    background: var(${colorNeutralBackground3});
   }
   :host([appearance='filled-lighter']:hover) .root,
   :host([appearance='filled-darker']:hover) .root {
-    border-color: ${colorTransparentStrokeInteractive};
+    border-color: var(${colorTransparentStrokeInteractive});
   }
   :host([appearance='filled-lighter']:active) .root,
   :host([appearance='filled-darker']:active) .root {
-    border-color: ${colorTransparentStrokeInteractive};
-    background: ${colorNeutralBackground3};
+    border-color: var(${colorTransparentStrokeInteractive});
+    background: var(${colorNeutralBackground3});
   }
 `;
 //# sourceMappingURL=text-input.styles.js.map

package/dist/esm/text-input/text-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;;;;iBAa5B,uBAAuB;cAC1B,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;WAC5B,oBAAoB;;;;;;;;;uBASR,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;;aAUnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;qBAGX,oBAAoB;;;oBAGrB,oBAAoB;WAC7B,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;kBAC3C,OAAO;;;kBAGP,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}
+{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;uBAGG,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;;iBAKvB,uBAAuB;0BACd,iBAAiB;;8BAEb,mBAAmB;;;;;;;;;;;;;qBAa5B,uBAAuB;kBAC1B,eAAe,eAAe,mBAAmB;+BACpC,4BAA4B;yBAClC,kBAAkB;eAC5B,oBAAoB;;;;;;;;;2BASR,kBAAkB;6BAChB,kBAAkB,SAAS,kBAAkB;mCACvC,wBAAwB;;;;+BAI5B,iBAAiB;4BACpB,kBAAkB;;;;;;iBAM7B,uBAAuB;yBACf,kBAAkB;sBACrB,0BAA0B;uBACzB,cAAc;uBACd,iBAAiB;qBACnB,eAAe;;;;;;;;;;iBAUnB,uBAAuB;;;;;;;iBAOvB,uBAAuB;qBACnB,eAAe;;;yBAGX,oBAAoB;;;wBAGrB,oBAAoB;eAC7B,mBAAmB;;;wBAGV,wBAAwB;+BACjB,iCAAiC;;;wBAGxC,0BAA0B;;;;;;;;;+BASnB,cAAc;4BACjB,kBAAkB;;;+BAGf,+BAA+B;;;kBAG5C,eAAe,eAAe,mBAAmB;;;iBAGlD,uBAAuB;;;sBAGlB,0BAA0B;kBAC9B,eAAe,eAAe,0BAA0B;;;;;iBAKzD,8BAA8B;;;iBAG9B,8BAA8B;4BACnB,8BAA8B;;;qBAGrC,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;eAIzB,oBAAoB;qBACd,uBAAuB;;;;qBAIvB,eAAe;;;qBAGf,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;eAIzB,kBAAkB;qBACZ,kBAAkB;;;;qBAIlB,eAAe;;;sBAGd,0BAA0B;;;yBAGvB,eAAe,eAAe,4BAA4B;;;+BAGpD,iCAAiC;;;+BAGjC,mCAAmC;;;;+BAInC,mCAAmC;;;+BAGnC,0BAA0B;;;;kBAIvC,eAAe,eAAe,sBAAsB;sBAChD,OAAO;;;sBAGP,uBAAuB;;;sBAGvB,uBAAuB;;;;wBAIrB,iCAAiC;;;;wBAIjC,iCAAiC;sBACnC,uBAAuB;;CAE5C,CAAC"}