newskit 3.13.0 → 4.2.0

package/cjs/theme/presets/style-presets.js

@@ -402,7 +402,6 @@ exports.stylePresets.buttonMinimalInverse = {
         backgroundColor: '{{colors.interactiveInverse020}}',
     },
 };
-exports.stylePresets.buttonDefault = exports.stylePresets.buttonSolidPrimary;
 //
 // Icon Button
 //
@@ -775,13 +774,6 @@ exports.stylePresets.iconButtonMinimalInverse = {
         backgroundColor: '{{colors.interactiveInverse020}}',
     },
 };
-exports.stylePresets.iconButtonDefault = exports.stylePresets.iconButtonSolidPrimary;
-exports.stylePresets.buttonSocialTwitter = exports.stylePresets.iconButtonMinimalSecondary;
-exports.stylePresets.buttonSocialFacebook = exports.stylePresets.iconButtonMinimalSecondary;
-exports.stylePresets.buttonSocialWhatsapp = exports.stylePresets.iconButtonMinimalSecondary;
-exports.stylePresets.buttonSocialEmail = exports.stylePresets.iconButtonMinimalSecondary;
-exports.stylePresets.buttonSocialLink = exports.stylePresets.iconButtonMinimalSecondary;
-exports.stylePresets.buttonSocialShare = exports.stylePresets.iconButtonMinimalSecondary;
 //
 // Icons
 //
@@ -890,18 +882,12 @@ exports.stylePresets.tagPrimaryInverse = {
         backgroundColor: '{{colors.interactiveInverse020}}',
     },
 };
-exports.stylePresets.tagDefault = exports.stylePresets.tagPrimary;
-// Tab
 exports.stylePresets.tab = {
     base: {
         backgroundColor: '{{colors.transparent}}',
         color: '{{colors.inkBase}}',
         iconColor: '{{colors.inkBase}}',
     },
-    selected: {
-        color: '{{colors.inkBrand010}}',
-        iconColor: '{{colors.inkBrand010}}',
-    },
     hover: {
         backgroundColor: '{{colors.interactivePrimary010}}',
         color: '{{colors.inkBrand010}}',
@@ -912,6 +898,15 @@ exports.stylePresets.tab = {
         color: '{{colors.inkBrand010}}',
         iconColor: '{{colors.inkBrand010}}',
     },
+    selected: {
+        color: '{{colors.inkBrand010}}',
+        iconColor: '{{colors.inkBrand010}}',
+    },
+    'selected:hover': {
+        backgroundColor: '{{colors.transparent}}',
+        color: '{{colors.inkBrand010}}',
+        iconColor: '{{colors.inkBrand010}}',
+    },
     disabled: {
         backgroundColor: '{{colors.interactiveDisabled010}}',
         color: '{{colors.inkNonEssential}}',
@@ -928,7 +923,58 @@ exports.stylePresets.tabsBarIndicator = {
         backgroundColor: '{{colors.interactivePrimary030}}',
     },
 };
-// Text Field
+// Input Field
+exports.stylePresets.inputField = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderStyle: 'solid',
+        borderColor: '{{colors.interactiveInput020}}',
+        borderWidth: '{{borders.borderWidthDefault}}',
+        borderRadius: '{{borders.borderRadiusDefault}}',
+        color: '{{colors.inkBase}}',
+        textOverflow: 'ellipsis',
+        placeholderColor: '{{colors.inkSubtle}}',
+        iconColor: '{{colors.inkBase}}',
+    },
+    focus: {
+        borderColor: '{{colors.interactiveInput040}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
+    },
+    hover: {
+        backgroundColor: '{{colors.interactiveInput010}}',
+    },
+    valid: {
+        borderColor: '{{colors.interactivePositive030}}',
+    },
+    'valid:hover': {
+        borderColor: '{{colors.interactivePositive030}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
+    },
+    'valid:focus': {
+        borderColor: '{{colors.interactiveInput010}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
+    },
+    disabled: {
+        borderColor: '{{colors.interactiveDisabled010}}',
+        color: '{{colors.inkNonEssential}}',
+        iconColor: '{{colors.inkNonEssential}}',
+    },
+    loading: {
+        iconColor: '{{colors.inkBrand010}}',
+    },
+    invalid: {
+        borderColor: '{{colors.interactiveNegative030}}',
+    },
+    'invalid:focus': {
+        borderColor: '{{colors.interactiveInput010}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
+    },
+    'invalid:hover': {
+        borderColor: '{{colors.interactiveNegative030}}',
+        backgroundColor: '{{colors.interactiveInput010}}',
+    },
+};
+// Assistive Text
 exports.stylePresets.assistiveText = {
     base: {
         color: '{{colors.inkSubtle}}',
@@ -940,7 +986,7 @@ exports.stylePresets.assistiveText = {
         color: '{{colors.inkNegative}}',
     },
     valid: {
-        color: '{{colors.inkPositive}}',
+        color: '{{colors.inkSubtle}}',
     },
 };
 exports.stylePresets.textField = {
@@ -1049,7 +1095,39 @@ exports.stylePresets.iconNegative = {
 //
 // Flag
 //
-exports.stylePresets.flagSolid = {
+exports.stylePresets.flagSolidPrimary = {
+    base: {
+        backgroundColor: '{{colors.interfaceBrand010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
+};
+exports.stylePresets.flagSolidPositive = {
+    base: {
+        backgroundColor: '{{colors.interfacePositive010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
+};
+exports.stylePresets.flagSolidNegative = {
+    base: {
+        backgroundColor: '{{colors.interfaceNegative010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
+};
+exports.stylePresets.flagSolidNotice = {
+    base: {
+        backgroundColor: '{{colors.interfaceNotice010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
+};
+exports.stylePresets.flagSolidInformative = {
     base: {
         backgroundColor: '{{colors.interfaceInformative010}}',
         borderRadius: '{{borders.borderRadiusSharp}}',
@@ -1057,27 +1135,66 @@ exports.stylePresets.flagSolid = {
         iconColor: '{{colors.inkInverse}}',
     },
 };
-exports.stylePresets.flagSolidLive = {
-    base: __assign(__assign({}, exports.stylePresets.flagSolid.base), { backgroundColor: '{{colors.interactiveNegative030}}' }),
+exports.stylePresets.flagSolidNeutral = {
+    base: {
+        backgroundColor: '{{colors.interfaceNeutral010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
 };
-exports.stylePresets.flagMinimal = {
+exports.stylePresets.flagSolidInverse = {
+    base: {
+        backgroundColor: '{{colors.interface010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkContrast}}',
+        iconColor: '{{colors.inkContrast}}',
+    },
+};
+exports.stylePresets.flagMinimalPrimary = {
     base: {
         backgroundColor: '{{colors.transparent}}',
-        color: '{{colors.inkInformative}}',
-        iconColor: '{{colors.inkInformative}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkBrand010}}',
+        iconColor: '{{colors.inkBrand010}}',
     },
 };
-exports.stylePresets.flagSolidInverse = {
+exports.stylePresets.flagMinimalPositive = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkPositive}}',
+        iconColor: '{{colors.inkPositive}}',
+    },
+};
+exports.stylePresets.flagMinimalNegative = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkNegative}}',
+        iconColor: '{{colors.inkNegative}}',
+    },
+};
+exports.stylePresets.flagMinimalNotice = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkNotice}}',
+        iconColor: '{{colors.inkNotice}}',
+    },
+};
+exports.stylePresets.flagMinimalInformative = {
     base: {
-        backgroundColor: '{{colors.inkInverse}}',
+        backgroundColor: '{{colors.transparent}}',
         borderRadius: '{{borders.borderRadiusSharp}}',
         color: '{{colors.inkInformative}}',
         iconColor: '{{colors.inkInformative}}',
     },
 };
-exports.stylePresets.flagSolidLiveInverse = {
+exports.stylePresets.flagMinimalNeutral = {
     base: {
-        backgroundColor: '{{colors.interfaceNegative020}}',
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
         color: '{{colors.inkBase}}',
         iconColor: '{{colors.inkBase}}',
     },
@@ -1085,11 +1202,11 @@ exports.stylePresets.flagSolidLiveInverse = {
 exports.stylePresets.flagMinimalInverse = {
     base: {
         backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
         color: '{{colors.inkInverse}}',
         iconColor: '{{colors.inkInverse}}',
     },
 };
-exports.stylePresets.flagDefault = exports.stylePresets.flagSolid;
 //
 // Link
 //
@@ -1109,10 +1226,6 @@ exports.stylePresets.linkStandalone = {
         iconColor: '{{colors.interactivePrimary050}}',
         textDecoration: 'underline',
     },
-    visited: {
-        color: '{{colors.interactiveVisited010}}',
-        iconColor: '{{colors.interactiveVisited010}}',
-    },
 };
 exports.stylePresets.linkStandaloneInverse = {
     base: {
@@ -1130,73 +1243,39 @@ exports.stylePresets.linkStandaloneInverse = {
         iconColor: '{{colors.interactiveInverse030}}',
         textDecoration: 'underline',
     },
-    visited: {
-        color: '{{colors.interactiveInverse040}}',
-        iconColor: '{{colors.interactiveInverse040}}',
-    },
 };
 exports.stylePresets.linkInline = {
     base: {
         color: '{{colors.interactivePrimary030}}',
         iconColor: '{{colors.interactivePrimary030}}',
+        textDecoration: 'underline',
     },
     hover: {
         color: '{{colors.interactivePrimary040}}',
         iconColor: '{{colors.interactivePrimary040}}',
+        textDecoration: 'underline',
     },
     active: {
         color: '{{colors.interactivePrimary050}}',
         iconColor: '{{colors.interactivePrimary050}}',
+        textDecoration: 'underline',
     },
     visited: {
         color: '{{colors.interactiveVisited010}}',
         iconColor: '{{colors.interactiveVisited010}}',
-    },
-};
-exports.stylePresets.linkInlineInverse = {
-    base: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-    },
-    hover: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-    },
-    active: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-    },
-    visited: {
-        color: '{{colors.interactiveInverse040}}',
-        iconColor: '{{colors.interactiveInverse040}}',
-    },
-};
-exports.stylePresets.linkEmail = {
-    base: {
-        color: '{{colors.interactivePrimary030}}',
-        iconColor: '{{colors.interactivePrimary030}}',
-        textDecoration: 'none',
-    },
-    hover: {
-        color: '{{colors.interactivePrimary040}}',
-        iconColor: '{{colors.interactivePrimary040}}',
         textDecoration: 'underline',
     },
-    active: {
-        color: '{{colors.interactivePrimary050}}',
-        iconColor: '{{colors.interactivePrimary050}}',
-        textDecoration: 'underline',
-    },
-    visited: {
+    'visited:hover': {
         color: '{{colors.interactiveVisited010}}',
         iconColor: '{{colors.interactiveVisited010}}',
+        textDecoration: 'underline',
     },
 };
-exports.stylePresets.linkEmailInverse = {
+exports.stylePresets.linkInlineInverse = {
     base: {
         color: '{{colors.interactiveInverse030}}',
         iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'none',
+        textDecoration: 'underline',
     },
     hover: {
         color: '{{colors.interactiveInverse030}}',
@@ -1211,46 +1290,9 @@ exports.stylePresets.linkEmailInverse = {
     visited: {
         color: '{{colors.interactiveInverse040}}',
         iconColor: '{{colors.interactiveInverse040}}',
-    },
-};
-exports.stylePresets.linkExternal = {
-    base: {
-        color: '{{colors.interactivePrimary030}}',
-        iconColor: '{{colors.interactivePrimary030}}',
-        textDecoration: 'none',
-    },
-    hover: {
-        color: '{{colors.interactivePrimary040}}',
-        iconColor: '{{colors.interactivePrimary040}}',
-        textDecoration: 'underline',
-    },
-    active: {
-        color: '{{colors.interactivePrimary050}}',
-        iconColor: '{{colors.interactivePrimary050}}',
-        textDecoration: 'underline',
-    },
-    visited: {
-        color: '{{colors.interactiveVisited010}}',
-        iconColor: '{{colors.interactiveVisited010}}',
-    },
-};
-exports.stylePresets.linkExternalInverse = {
-    base: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'none',
-    },
-    hover: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
         textDecoration: 'underline',
     },
-    active: {
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'underline',
-    },
-    visited: {
+    'visited:hover': {
         color: '{{colors.interactiveInverse040}}',
         iconColor: '{{colors.interactiveInverse040}}',
     },
@@ -1306,6 +1348,8 @@ exports.stylePresets.sliderThumb = {
 exports.stylePresets.sliderThumbLabel = {
     base: {
         color: '{{colors.inkBrand010}}',
+        textAlign: 'center',
+        whiteSpace: 'nowrap',
     },
     disabled: {
         color: '{{colors.inkNonEssential}}',
@@ -1341,7 +1385,6 @@ exports.stylePresets.volumeControlTrack = {
         borderRadius: '{{borders.borderRadiusPill}}',
     },
 };
-exports.stylePresets.volumeControlButtons = exports.stylePresets.iconButtonMinimalPrimary;
 //
 // Audio Player
 //
@@ -1373,10 +1416,6 @@ exports.stylePresets.audioPlayerThumb = {
         iconColor: '{{colors.inkSubtle}}',
     },
 };
-exports.stylePresets.audioPlayerVolumeControlThumb = exports.stylePresets.audioPlayerThumb;
-exports.stylePresets.audioPlayerPopoutButton = exports.stylePresets.iconButtonMinimalPrimary;
-exports.stylePresets.audioPlayerControlButton = exports.stylePresets.iconButtonMinimalPrimary;
-exports.stylePresets.audioPlayerPlayPauseButton = exports.stylePresets.iconButtonSolidPrimary;
 //
 // Image
 //
@@ -1442,19 +1481,16 @@ exports.stylePresets.titleBar = {
         backgroundColor: '{{colors.transparent}}',
     },
 };
-exports.stylePresets.titleBarButton = exports.stylePresets.buttonSolidPrimary;
-exports.stylePresets.titleBarLink = exports.stylePresets.linkStandalone;
 //
 // Divider
 //
-exports.stylePresets.dividerHorizontal = {
+exports.stylePresets.divider = {
     base: {
         borderStyle: 'solid',
         borderColor: '{{colors.interface040}}',
         borderWidth: '{{borders.borderWidthDefault}}',
     },
 };
-exports.stylePresets.dividerVertical = exports.stylePresets.dividerHorizontal;
 exports.stylePresets.dividerInverse = {
     base: {
         borderStyle: 'solid',
@@ -1510,12 +1546,12 @@ exports.stylePresets.overlay = {
 //
 exports.stylePresets.scrollOverlaysHorizontal = {
     base: {
-        backgroundImage: '{{overlays.overlayGradientInverseHorizontal}}',
+        backgroundImage: '{{overlays.overlayGradientBaseHorizontal}}',
     },
 };
 exports.stylePresets.scrollOverlaysVertical = {
     base: {
-        backgroundImage: '{{overlays.overlayGradientInverseVertical}}',
+        backgroundImage: '{{overlays.overlayGradientBaseVertical}}',
     },
 };
 //
@@ -1525,7 +1561,7 @@ exports.stylePresets.drawerPanel = {
     base: {
         borderRadius: '{{borders.borderRadiusSharp}}',
         backgroundColor: '{{colors.interface010}}',
-        boxShadow: '{{shadows.shadow050}}',
+        boxShadow: '{{shadows.shadow060}}',
     },
 };
 // Card
@@ -1606,17 +1642,6 @@ exports.stylePresets.inlineMessageNegative = {
         color: '{{colors.inkBase}}',
     },
 };
-exports.stylePresets.inlineMessageNotice = {
-    base: {
-        backgroundColor: '{{colors.interfaceNotice020}}',
-        borderColor: '{{colors.interfaceNotice010}}',
-        borderStyle: 'solid',
-        borderRadius: '{{borders.borderRadiusRounded010}}',
-        borderWidth: '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth030}}',
-        iconColor: '{{colors.inkNotice}}',
-        color: '{{colors.inkBase}}',
-    },
-};
 // Menu
 exports.stylePresets.menuItemVertical = {
     base: {
@@ -1629,20 +1654,24 @@ exports.stylePresets.menuItemVertical = {
     },
     hover: {
         backgroundColor: '{{colors.interactivePrimary010}}',
-        borderColor: '{{colors.interactivePrimary030}}',
-        color: '{{colors.interactivePrimary030}}',
-        iconColor: '{{colors.interactivePrimary030}}',
+        color: '{{colors.inkBrand010}}',
+        iconColor: '{{colors.inkBrand010}}',
     },
     active: {
         backgroundColor: '{{colors.interactivePrimary020}}',
-        borderColor: '{{colors.interactivePrimary040}}',
-        color: '{{colors.interactivePrimary040}}',
-        iconColor: '{{colors.interactivePrimary040}}',
+        color: '{{colors.inkBrand010}}',
+        iconColor: '{{colors.inkBrand010}}',
     },
     selected: {
         borderColor: '{{colors.interactivePrimary030}}',
-        color: '{{colors.interactivePrimary030}}',
-        iconColor: '{{colors.interactivePrimary030}}',
+        color: '{{colors.inkBrand010}}',
+        iconColor: '{{colors.inkBrand010}}',
+    },
+    'selected:hover': {
+        backgroundColor: '{{colors.transparent}}',
+        borderColor: '{{colors.interactivePrimary030}}',
+        color: '{{colors.inkBrand010}}',
+        iconColor: '{{colors.inkBrand010}}',
     },
     disabled: {
         color: '{{colors.inkNonEssential}}',
@@ -1660,11 +1689,11 @@ exports.stylePresets.menuItemHorizontal = {
     },
     hover: {
         borderColor: '{{colors.interactivePrimary030}}',
-        color: '{{colors.inkContrast}}',
-        iconColor: '{{colors.inkContrast}}',
+        color: '{{colors.inkBase}}',
+        iconColor: '{{colors.inkBase}}',
     },
     active: {
-        borderColor: '{{colors.interactivePrimary030}}',
+        borderColor: '{{colors.interactivePrimary040}}',
         color: '{{colors.inkContrast}}',
         iconColor: '{{colors.inkContrast}}',
     },
@@ -1673,6 +1702,11 @@ exports.stylePresets.menuItemHorizontal = {
         color: '{{colors.inkBase}}',
         iconColor: '{{colors.inkBase}}',
     },
+    'selected:hover': {
+        borderColor: '{{colors.interactivePrimary030}}',
+        color: '{{colors.inkBase}}',
+        iconColor: '{{colors.inkBase}}',
+    },
     disabled: {
         color: '{{colors.inkNonEssential}}',
         iconColor: '{{colors.inkNonEssential}}',
@@ -1684,26 +1718,28 @@ exports.stylePresets.menuItemHorizontalInverse = {
         borderStyle: 'solid',
         borderColor: '{{colors.transparent}}',
         borderWidth: '{{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth020}} {{borders.borderWidth000}}',
-        color: '{{colors.interactiveInverse040}}',
-        iconColor: '{{colors.interactiveInverse040}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
     },
     hover: {
-        backgroundColor: '{{colors.transparent}}',
-        borderColor: '{{colors.interactiveInverse040}}',
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.inkContrast}}',
+        borderColor: '{{colors.interactiveInverse030}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
+    'selected:hover': {
+        borderColor: '{{colors.interactiveInverse030}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
     },
     active: {
-        backgroundColor: '{{colors.transparent}}',
-        borderColor: '{{colors.interactiveInverse050}}',
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.inkContrast}}',
+        borderColor: '{{colors.interactiveInverse030}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
     },
     selected: {
-        backgroundColor: '{{colors.interactiveInverse030}}',
         borderColor: '{{colors.interactiveInverse030}}',
-        color: '{{colors.interactiveInverse030}}',
-        iconColor: '{{colors.inkContrast}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
     },
     disabled: {
         color: '{{colors.interactiveInverse020}}',
@@ -1717,7 +1753,129 @@ exports.stylePresets.modalPanel = {
     base: {
         borderRadius: '{{borders.borderRadiusSharp}}',
         backgroundColor: '{{colors.interfaceBackground}}',
-        boxShadow: '{{shadows.shadow050}}',
+        boxShadow: '{{shadows.shadow060}}',
+    },
+};
+//
+// Checkbox
+//
+exports.stylePresets.checkboxInput = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderColor: '{{colors.interactiveInput020}}',
+        borderWidth: '{{borders.borderWidth010}}',
+        borderRadius: '{{borders.borderRadiusRounded010}}',
+        borderStyle: 'solid',
+        iconColor: '{{colors.inkInverse}}',
+    },
+    hover: {
+        borderColor: '{{colors.interactiveInput040}}',
+    },
+    focus: {
+        borderColor: '{{colors.interactiveInput050}}',
+    },
+    'focus:hover': {
+        borderColor: '{{colors.interactiveInput050}}',
+    },
+    checked: {
+        backgroundColor: '{{colors.interactiveInput040}}',
+        borderColor: '{{colors.interactiveInput040}}',
+    },
+    'checked:hover': {
+        backgroundColor: '{{colors.interactiveInput050}}',
+        borderColor: '{{colors.interactiveInput050}}',
+    },
+    'checked:focus': {
+        backgroundColor: '{{colors.interactiveInput050}}',
+        borderColor: '{{colors.interactiveInput050}}',
+    },
+    'checked:focus:hover': {
+        backgroundColor: '{{colors.interactiveInput050}}',
+        borderColor: '{{colors.interactiveInput050}}',
+    },
+    invalid: {
+        borderColor: '{{colors.interactiveNegative040}}',
+    },
+    'invalid:focus': {
+        borderColor: '{{colors.interactiveNegative050}}',
+    },
+    'invalid:hover': {
+        borderColor: '{{colors.interactiveNegative050}}',
+    },
+    'invalid:focus:hover': {
+        borderColor: '{{colors.interactiveNegative050}}',
+    },
+    'checked:invalid': {
+        backgroundColor: '{{colors.interactiveNegative040}}',
+        borderColor: '{{colors.interactiveNegative040}}',
+    },
+    'checked:invalid:focus': {
+        backgroundColor: '{{colors.interactiveNegative050}}',
+        borderColor: '{{colors.interactiveNegative050}}',
+    },
+    'checked:invalid:hover': {
+        backgroundColor: '{{colors.interactiveNegative050}}',
+        borderColor: '{{colors.interactiveNegative050}}',
+    },
+    'checked:invalid:focus:hover': {
+        backgroundColor: '{{colors.interactiveNegative050}}',
+        borderColor: '{{colors.interactiveNegative050}}',
+    },
+    valid: {
+        borderColor: '{{colors.interactivePositive040}}',
+    },
+    'valid:focus': {
+        borderColor: '{{colors.interactivePositive050}}',
+    },
+    'valid:hover': {
+        borderColor: '{{colors.interactivePositive050}}',
+    },
+    'valid:focus:hover': {
+        borderColor: '{{colors.interactivePositive050}}',
+    },
+    'checked:valid': {
+        backgroundColor: '{{colors.interactivePositive040}}',
+        borderColor: '{{colors.interactivePositive040}}',
+    },
+    'checked:valid:focus': {
+        backgroundColor: '{{colors.interactivePositive050}}',
+        borderColor: '{{colors.interactivePositive050}}',
+    },
+    'checked:valid:hover': {
+        backgroundColor: '{{colors.interactivePositive050}}',
+        borderColor: '{{colors.interactivePositive050}}',
+    },
+    'checked:valid:focus:hover': {
+        backgroundColor: '{{colors.interactivePositive050}}',
+        borderColor: '{{colors.interactivePositive050}}',
+    },
+    disabled: {
+        borderColor: '{{colors.interactiveDisabled010}}',
+    },
+    'checked:disabled': {
+        backgroundColor: '{{colors.interactiveDisabled010}}',
+        borderColor: '{{colors.interactiveDisabled010}}',
+        iconColor: '{{colors.inkNonEssential}}',
+    },
+};
+exports.stylePresets.checkboxFeedback = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusRounded010}}',
+    },
+    hover: {
+        backgroundColor: '{{colors.interactiveInput030}}',
+    },
+    focus: {
+        backgroundColor: '{{colors.interactiveInput030}}',
+    },
+};
+exports.stylePresets.controlLabel = {
+    base: {
+        color: '{{colors.inkBase}}',
+    },
+    disabled: {
+        color: '{{colors.inkNonEssential}}',
     },
 };
 //# sourceMappingURL=style-presets.js.map