newskit 3.13.0 → 4.2.0

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

@@ -399,7 +399,6 @@ stylePresets.buttonMinimalInverse = {
         backgroundColor: '{{colors.interactiveInverse020}}',
     },
 };
-stylePresets.buttonDefault = stylePresets.buttonSolidPrimary;
 //
 // Icon Button
 //
@@ -772,13 +771,6 @@ stylePresets.iconButtonMinimalInverse = {
         backgroundColor: '{{colors.interactiveInverse020}}',
     },
 };
-stylePresets.iconButtonDefault = stylePresets.iconButtonSolidPrimary;
-stylePresets.buttonSocialTwitter = stylePresets.iconButtonMinimalSecondary;
-stylePresets.buttonSocialFacebook = stylePresets.iconButtonMinimalSecondary;
-stylePresets.buttonSocialWhatsapp = stylePresets.iconButtonMinimalSecondary;
-stylePresets.buttonSocialEmail = stylePresets.iconButtonMinimalSecondary;
-stylePresets.buttonSocialLink = stylePresets.iconButtonMinimalSecondary;
-stylePresets.buttonSocialShare = stylePresets.iconButtonMinimalSecondary;
 //
 // Icons
 //
@@ -887,18 +879,12 @@ stylePresets.tagPrimaryInverse = {
         backgroundColor: '{{colors.interactiveInverse020}}',
     },
 };
-stylePresets.tagDefault = stylePresets.tagPrimary;
-// Tab
 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}}',
@@ -909,6 +895,15 @@ 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}}',
@@ -925,7 +920,58 @@ stylePresets.tabsBarIndicator = {
         backgroundColor: '{{colors.interactivePrimary030}}',
     },
 };
-// Text Field
+// Input Field
+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
 stylePresets.assistiveText = {
     base: {
         color: '{{colors.inkSubtle}}',
@@ -937,7 +983,7 @@ stylePresets.assistiveText = {
         color: '{{colors.inkNegative}}',
     },
     valid: {
-        color: '{{colors.inkPositive}}',
+        color: '{{colors.inkSubtle}}',
     },
 };
 stylePresets.textField = {
@@ -1046,7 +1092,39 @@ stylePresets.iconNegative = {
 //
 // Flag
 //
-stylePresets.flagSolid = {
+stylePresets.flagSolidPrimary = {
+    base: {
+        backgroundColor: '{{colors.interfaceBrand010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
+};
+stylePresets.flagSolidPositive = {
+    base: {
+        backgroundColor: '{{colors.interfacePositive010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
+};
+stylePresets.flagSolidNegative = {
+    base: {
+        backgroundColor: '{{colors.interfaceNegative010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
+};
+stylePresets.flagSolidNotice = {
+    base: {
+        backgroundColor: '{{colors.interfaceNotice010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
+};
+stylePresets.flagSolidInformative = {
     base: {
         backgroundColor: '{{colors.interfaceInformative010}}',
         borderRadius: '{{borders.borderRadiusSharp}}',
@@ -1054,27 +1132,66 @@ stylePresets.flagSolid = {
         iconColor: '{{colors.inkInverse}}',
     },
 };
-stylePresets.flagSolidLive = {
-    base: __assign(__assign({}, stylePresets.flagSolid.base), { backgroundColor: '{{colors.interactiveNegative030}}' }),
+stylePresets.flagSolidNeutral = {
+    base: {
+        backgroundColor: '{{colors.interfaceNeutral010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkInverse}}',
+        iconColor: '{{colors.inkInverse}}',
+    },
 };
-stylePresets.flagMinimal = {
+stylePresets.flagSolidInverse = {
+    base: {
+        backgroundColor: '{{colors.interface010}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkContrast}}',
+        iconColor: '{{colors.inkContrast}}',
+    },
+};
+stylePresets.flagMinimalPrimary = {
     base: {
         backgroundColor: '{{colors.transparent}}',
-        color: '{{colors.inkInformative}}',
-        iconColor: '{{colors.inkInformative}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkBrand010}}',
+        iconColor: '{{colors.inkBrand010}}',
     },
 };
-stylePresets.flagSolidInverse = {
+stylePresets.flagMinimalPositive = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkPositive}}',
+        iconColor: '{{colors.inkPositive}}',
+    },
+};
+stylePresets.flagMinimalNegative = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkNegative}}',
+        iconColor: '{{colors.inkNegative}}',
+    },
+};
+stylePresets.flagMinimalNotice = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
+        color: '{{colors.inkNotice}}',
+        iconColor: '{{colors.inkNotice}}',
+    },
+};
+stylePresets.flagMinimalInformative = {
     base: {
-        backgroundColor: '{{colors.inkInverse}}',
+        backgroundColor: '{{colors.transparent}}',
         borderRadius: '{{borders.borderRadiusSharp}}',
         color: '{{colors.inkInformative}}',
         iconColor: '{{colors.inkInformative}}',
     },
 };
-stylePresets.flagSolidLiveInverse = {
+stylePresets.flagMinimalNeutral = {
     base: {
-        backgroundColor: '{{colors.interfaceNegative020}}',
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
         color: '{{colors.inkBase}}',
         iconColor: '{{colors.inkBase}}',
     },
@@ -1082,11 +1199,11 @@ stylePresets.flagSolidLiveInverse = {
 stylePresets.flagMinimalInverse = {
     base: {
         backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusSharp}}',
         color: '{{colors.inkInverse}}',
         iconColor: '{{colors.inkInverse}}',
     },
 };
-stylePresets.flagDefault = stylePresets.flagSolid;
 //
 // Link
 //
@@ -1106,10 +1223,6 @@ stylePresets.linkStandalone = {
         iconColor: '{{colors.interactivePrimary050}}',
         textDecoration: 'underline',
     },
-    visited: {
-        color: '{{colors.interactiveVisited010}}',
-        iconColor: '{{colors.interactiveVisited010}}',
-    },
 };
 stylePresets.linkStandaloneInverse = {
     base: {
@@ -1127,73 +1240,39 @@ stylePresets.linkStandaloneInverse = {
         iconColor: '{{colors.interactiveInverse030}}',
         textDecoration: 'underline',
     },
-    visited: {
-        color: '{{colors.interactiveInverse040}}',
-        iconColor: '{{colors.interactiveInverse040}}',
-    },
 };
 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}}',
-    },
-};
-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}}',
-    },
-};
-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',
     },
 };
-stylePresets.linkEmailInverse = {
+stylePresets.linkInlineInverse = {
     base: {
         color: '{{colors.interactiveInverse030}}',
         iconColor: '{{colors.interactiveInverse030}}',
-        textDecoration: 'none',
+        textDecoration: 'underline',
     },
     hover: {
         color: '{{colors.interactiveInverse030}}',
@@ -1208,46 +1287,9 @@ stylePresets.linkEmailInverse = {
     visited: {
         color: '{{colors.interactiveInverse040}}',
         iconColor: '{{colors.interactiveInverse040}}',
-    },
-};
-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}}',
-    },
-};
-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}}',
     },
@@ -1303,6 +1345,8 @@ stylePresets.sliderThumb = {
 stylePresets.sliderThumbLabel = {
     base: {
         color: '{{colors.inkBrand010}}',
+        textAlign: 'center',
+        whiteSpace: 'nowrap',
     },
     disabled: {
         color: '{{colors.inkNonEssential}}',
@@ -1338,7 +1382,6 @@ stylePresets.volumeControlTrack = {
         borderRadius: '{{borders.borderRadiusPill}}',
     },
 };
-stylePresets.volumeControlButtons = stylePresets.iconButtonMinimalPrimary;
 //
 // Audio Player
 //
@@ -1370,10 +1413,6 @@ stylePresets.audioPlayerThumb = {
         iconColor: '{{colors.inkSubtle}}',
     },
 };
-stylePresets.audioPlayerVolumeControlThumb = stylePresets.audioPlayerThumb;
-stylePresets.audioPlayerPopoutButton = stylePresets.iconButtonMinimalPrimary;
-stylePresets.audioPlayerControlButton = stylePresets.iconButtonMinimalPrimary;
-stylePresets.audioPlayerPlayPauseButton = stylePresets.iconButtonSolidPrimary;
 //
 // Image
 //
@@ -1439,19 +1478,16 @@ stylePresets.titleBar = {
         backgroundColor: '{{colors.transparent}}',
     },
 };
-stylePresets.titleBarButton = stylePresets.buttonSolidPrimary;
-stylePresets.titleBarLink = stylePresets.linkStandalone;
 //
 // Divider
 //
-stylePresets.dividerHorizontal = {
+stylePresets.divider = {
     base: {
         borderStyle: 'solid',
         borderColor: '{{colors.interface040}}',
         borderWidth: '{{borders.borderWidthDefault}}',
     },
 };
-stylePresets.dividerVertical = stylePresets.dividerHorizontal;
 stylePresets.dividerInverse = {
     base: {
         borderStyle: 'solid',
@@ -1507,12 +1543,12 @@ stylePresets.overlay = {
 //
 stylePresets.scrollOverlaysHorizontal = {
     base: {
-        backgroundImage: '{{overlays.overlayGradientInverseHorizontal}}',
+        backgroundImage: '{{overlays.overlayGradientBaseHorizontal}}',
     },
 };
 stylePresets.scrollOverlaysVertical = {
     base: {
-        backgroundImage: '{{overlays.overlayGradientInverseVertical}}',
+        backgroundImage: '{{overlays.overlayGradientBaseVertical}}',
     },
 };
 //
@@ -1522,7 +1558,7 @@ stylePresets.drawerPanel = {
     base: {
         borderRadius: '{{borders.borderRadiusSharp}}',
         backgroundColor: '{{colors.interface010}}',
-        boxShadow: '{{shadows.shadow050}}',
+        boxShadow: '{{shadows.shadow060}}',
     },
 };
 // Card
@@ -1603,17 +1639,6 @@ stylePresets.inlineMessageNegative = {
         color: '{{colors.inkBase}}',
     },
 };
-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
 stylePresets.menuItemVertical = {
     base: {
@@ -1626,20 +1651,24 @@ 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}}',
@@ -1657,11 +1686,11 @@ 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}}',
     },
@@ -1670,6 +1699,11 @@ 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}}',
@@ -1681,26 +1715,28 @@ 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}}',
@@ -1714,7 +1750,129 @@ stylePresets.modalPanel = {
     base: {
         borderRadius: '{{borders.borderRadiusSharp}}',
         backgroundColor: '{{colors.interfaceBackground}}',
-        boxShadow: '{{shadows.shadow050}}',
+        boxShadow: '{{shadows.shadow060}}',
+    },
+};
+//
+// Checkbox
+//
+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}}',
+    },
+};
+stylePresets.checkboxFeedback = {
+    base: {
+        backgroundColor: '{{colors.transparent}}',
+        borderRadius: '{{borders.borderRadiusRounded010}}',
+    },
+    hover: {
+        backgroundColor: '{{colors.interactiveInput030}}',
+    },
+    focus: {
+        backgroundColor: '{{colors.interactiveInput030}}',
+    },
+};
+stylePresets.controlLabel = {
+    base: {
+        color: '{{colors.inkBase}}',
+    },
+    disabled: {
+        color: '{{colors.inkNonEssential}}',
     },
 };
 //# sourceMappingURL=style-presets.js.map