@carbon/themes 11.77.0 → 11.78.0

package/src/dtcg/components/button.json

@@ -0,0 +1,193 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$description": "Button component color tokens for all button variants and states.",
+  "button": {
+    "danger-active": {
+      "$type": "color",
+      "$description": "Background color for danger buttons in active/pressed state. Use when user clicks or presses a destructive action button.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{red.80}",
+          "g10": "{red.80}",
+          "g90": "{red.80}",
+          "g100": "{red.80}"
+        }
+      }
+    },
+    "danger-hover": {
+      "$type": "color",
+      "$description": "Background color for danger buttons on hover. Use when user hovers over a destructive action button to provide visual feedback.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "#b81921",
+          "g10": "#b81921",
+          "g90": "#b81921",
+          "g100": "#b81921"
+        }
+      }
+    },
+    "danger-primary": {
+      "$type": "color",
+      "$description": "Background color for primary danger buttons in default state. Use for destructive actions like delete, remove, or cancel that require high emphasis.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{red.60}",
+          "g10": "{red.60}",
+          "g90": "{red.60}",
+          "g100": "{red.60}"
+        }
+      }
+    },
+    "danger-secondary": {
+      "$type": "color",
+      "$description": "Border and text color for secondary danger buttons. Use for destructive actions that need less emphasis than primary danger buttons.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{red.60}",
+          "g10": "{red.60}",
+          "g90": "{red.40}",
+          "g100": "{red.50}"
+        }
+      }
+    },
+    "disabled": {
+      "$type": "color",
+      "$description": "Background color for disabled buttons across all variants. Use when a button action is temporarily unavailable or not applicable in the current context.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.30}",
+          "g10": "{gray.30}",
+          "g90": "{gray.50}",
+          "g100": "{gray.50}"
+        },
+        "org.carbon": {
+          "alphaModifiers": {
+            "g90": 0.3,
+            "g100": 0.3
+          }
+        }
+      }
+    },
+    "primary": {
+      "$type": "color",
+      "$description": "Background color for primary buttons in default state. Use for the main call-to-action on a page or in a workflow step.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{blue.60}",
+          "g10": "{blue.60}",
+          "g90": "{blue.60}",
+          "g100": "{blue.60}"
+        }
+      }
+    },
+    "primary-active": {
+      "$type": "color",
+      "$description": "Background color for primary buttons in active/pressed state. Use when user clicks or presses the primary action button.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{blue.80}",
+          "g10": "{blue.80}",
+          "g90": "{blue.80}",
+          "g100": "{blue.80}"
+        }
+      }
+    },
+    "primary-hover": {
+      "$type": "color",
+      "$description": "Background color for primary buttons on hover. Use when user hovers over the primary action button to provide visual feedback.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{blue.60Hover}",
+          "g10": "{blue.60Hover}",
+          "g90": "{blue.60Hover}",
+          "g100": "{blue.60Hover}"
+        }
+      }
+    },
+    "secondary": {
+      "$type": "color",
+      "$description": "Background color for secondary buttons in default state. Use for secondary actions that support the primary action or provide alternative paths.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.80}",
+          "g10": "{gray.80}",
+          "g90": "{gray.60}",
+          "g100": "{gray.60}"
+        }
+      }
+    },
+    "secondary-active": {
+      "$type": "color",
+      "$description": "Background color for secondary buttons in active/pressed state. Use when user clicks or presses a secondary action button.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.60}",
+          "g10": "{gray.60}",
+          "g90": "{gray.80}",
+          "g100": "{gray.80}"
+        }
+      }
+    },
+    "secondary-hover": {
+      "$type": "color",
+      "$description": "Background color for secondary buttons on hover. Use when user hovers over a secondary action button to provide visual feedback.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.80Hover}",
+          "g10": "{gray.80Hover}",
+          "g90": "{gray.60Hover}",
+          "g100": "{gray.60Hover}"
+        }
+      }
+    },
+    "separator": {
+      "$type": "color",
+      "$description": "Border color for button separators in button groups or split buttons. Use to visually divide adjacent buttons while maintaining their connection.",
+      "$extensions": {
+        "carbon.themes": {
+          "fallback": "{gray.20}",
+          "white": "{gray.20}",
+          "g10": "{gray.20}",
+          "g90": "{gray.100}",
+          "g100": "{gray.100}"
+        }
+      }
+    },
+    "tertiary": {
+      "$type": "color",
+      "$description": "Text and icon color for tertiary buttons in default state. Use for low-emphasis actions or when multiple actions need equal visual weight.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{blue.60}",
+          "g10": "{blue.60}",
+          "g90": "{white.default}",
+          "g100": "{white.default}"
+        }
+      }
+    },
+    "tertiary-active": {
+      "$type": "color",
+      "$description": "Text and icon color for tertiary buttons in active/pressed state. Use when user clicks or presses a tertiary action button.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{blue.80}",
+          "g10": "{blue.80}",
+          "g90": "{gray.30}",
+          "g100": "{gray.30}"
+        }
+      }
+    },
+    "tertiary-hover": {
+      "$type": "color",
+      "$description": "Background color for tertiary buttons on hover. Use when user hovers over a tertiary action button to provide subtle visual feedback.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{blue.60Hover}",
+          "g10": "{blue.60Hover}",
+          "g90": "{gray.10}",
+          "g100": "{gray.10}"
+        }
+      }
+    }
+  }
+}

package/src/dtcg/components/content-switcher.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$description": "Content switcher component color tokens for tab-like navigation between content views.",
+  "content-switcher": {
+    "background": {
+      "$type": "color",
+      "$description": "Background color for the content switcher container. Provides the base surface for unselected switcher options.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.20}",
+          "g10": "{gray.20}",
+          "g90": "{black.default}",
+          "g100": "{black.default}"
+        },
+        "org.carbon": {
+          "alphaModifiers": {
+            "g90": 0,
+            "g100": 0
+          }
+        }
+      }
+    },
+    "background-hover": {
+      "$type": "color",
+      "$description": "Background color for content switcher options on hover. Use to provide visual feedback when hovering over unselected options.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.20Hover}",
+          "g10": "{gray.20Hover}",
+          "g90": "{gray.50}",
+          "g100": "{gray.50}"
+        },
+        "org.carbon": {
+          "alphaModifiers": {
+            "g90": 0.12,
+            "g100": 0.12
+          }
+        }
+      }
+    },
+    "selected": {
+      "$type": "color",
+      "$description": "Background color for the selected content switcher option. Use to highlight the currently active view or tab.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{white.default}",
+          "g10": "{white.default}",
+          "g90": "{gray.50}",
+          "g100": "{gray.50}"
+        },
+        "org.carbon": {
+          "alphaModifiers": {
+            "g90": 0.24,
+            "g100": 0.24
+          }
+        }
+      }
+    }
+  }
+}

package/src/dtcg/components/notification.json

@@ -0,0 +1,130 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$description": "Notification component color tokens for inline and toast notifications across all severity levels.",
+  "notification": {
+    "action-hover": {
+      "$type": "color",
+      "$description": "Background color for notification action buttons on hover. Use for interactive elements within light-themed notifications.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{white.default}",
+          "g10": "{white.default}"
+        }
+      }
+    },
+    "action-tertiary-inverse": {
+      "$type": "color",
+      "$description": "Background color for tertiary action buttons in inverse (dark) notifications. Use for low-emphasis actions in dark notification variants.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{white.default}",
+          "g10": "{white.default}",
+          "g90": "{blue.60}",
+          "g100": "{blue.60}"
+        }
+      }
+    },
+    "action-tertiary-inverse-active": {
+      "$type": "color",
+      "$description": "Background color for tertiary action buttons in active/pressed state within inverse notifications. Use when user clicks action in dark notifications.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.30}",
+          "g10": "{gray.30}",
+          "g90": "{blue.80}",
+          "g100": "{blue.80}"
+        }
+      }
+    },
+    "action-tertiary-inverse-hover": {
+      "$type": "color",
+      "$description": "Background color for tertiary action buttons on hover within inverse notifications. Use to provide feedback in dark notification variants.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.10}",
+          "g10": "{gray.10}",
+          "g90": "{blue.60Hover}",
+          "g100": "{blue.60Hover}"
+        }
+      }
+    },
+    "action-tertiary-inverse-text": {
+      "$type": "color",
+      "$description": "Text color for tertiary action buttons in inverse notifications. Ensures readable contrast for action text in dark notification variants.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.100}",
+          "g10": "{gray.100}",
+          "g90": "{white.default}",
+          "g100": "{white.default}"
+        }
+      }
+    },
+    "action-tertiary-inverse-text-on-color-disabled": {
+      "$type": "color",
+      "$description": "Text color for disabled tertiary action buttons in inverse notifications. Use when actions are temporarily unavailable in dark notifications.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{white.default}",
+          "g10": "{white.default}",
+          "g90": "{gray.50}",
+          "g100": "{gray.50}"
+        },
+        "org.carbon": {
+          "alphaModifiers": {
+            "white": 0.25,
+            "g10": 0.25
+          }
+        }
+      }
+    },
+    "background-error": {
+      "$type": "color",
+      "$description": "Background color for error notifications. Use to alert users of critical issues, failures, or actions that require immediate attention.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{red.10}",
+          "g10": "{red.10}",
+          "g90": "{gray.80}",
+          "g100": "{gray.90}"
+        }
+      }
+    },
+    "background-info": {
+      "$type": "color",
+      "$description": "Background color for informational notifications. Use to provide helpful context, tips, or non-critical updates to users.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{blue.10}",
+          "g10": "{blue.10}",
+          "g90": "{gray.80}",
+          "g100": "{gray.90}"
+        }
+      }
+    },
+    "background-success": {
+      "$type": "color",
+      "$description": "Background color for success notifications. Use to confirm successful actions, completed processes, or positive outcomes.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{green.10}",
+          "g10": "{green.10}",
+          "g90": "{gray.80}",
+          "g100": "{gray.90}"
+        }
+      }
+    },
+    "background-warning": {
+      "$type": "color",
+      "$description": "Background color for warning notifications. Use to alert users of potential issues, cautions, or actions that need attention but aren't critical.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{yellow.10}",
+          "g10": "{yellow.10}",
+          "g90": "{gray.80}",
+          "g100": "{gray.90}"
+        }
+      }
+    }
+  }
+}

package/src/dtcg/components/status.json

@@ -0,0 +1,122 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$description": "Status indicator component color tokens for displaying system and content states.",
+  "status": {
+    "accessibility-background": {
+      "$type": "color",
+      "$description": "Background color for accessibility status indicators. Use to highlight accessibility-related features or compliance status.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{white.default}",
+          "g10": "{white.default}",
+          "g90": "{gray.100}",
+          "g100": "{gray.100}"
+        }
+      }
+    },
+    "blue": {
+      "$type": "color",
+      "$description": "Color for blue status indicators. Use for informational states, in-progress items, or neutral status without specific semantic meaning.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{blue.70}",
+          "g10": "{blue.70}",
+          "g90": "{blue.50}",
+          "g100": "{blue.50}"
+        }
+      }
+    },
+    "gray": {
+      "$type": "color",
+      "$description": "Color for gray status indicators. Use for inactive, disabled, or neutral states that don't require color semantics.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{gray.60}",
+          "g10": "{gray.60}",
+          "g90": "{gray.50}",
+          "g100": "{gray.50}"
+        }
+      }
+    },
+    "green": {
+      "$type": "color",
+      "$description": "Color for green status indicators. Use for success states, completed items, active/running status, or positive conditions.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{green.50}",
+          "g10": "{green.50}",
+          "g90": "{green.40}",
+          "g100": "{green.40}"
+        }
+      }
+    },
+    "orange": {
+      "$type": "color",
+      "$description": "Color for orange status indicators. Use for warning states, items needing attention, or moderate priority issues.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{orange.40}",
+          "g10": "{orange.40}",
+          "g90": "{orange.40}",
+          "g100": "{orange.40}"
+        }
+      }
+    },
+    "orange-outline": {
+      "$type": "color",
+      "$description": "Outline/border color for orange status indicators in light themes. Provides visual definition for outlined warning status variants.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{orange.60}",
+          "g10": "{orange.60}"
+        }
+      }
+    },
+    "purple": {
+      "$type": "color",
+      "$description": "Color for purple status indicators. Use for special states, premium features, or custom priority levels.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{purple.60}",
+          "g10": "{purple.60}",
+          "g90": "{purple.50}",
+          "g100": "{purple.50}"
+        }
+      }
+    },
+    "red": {
+      "$type": "color",
+      "$description": "Color for red status indicators. Use for error states, failed items, critical issues, or stopped/inactive status.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{red.60}",
+          "g10": "{red.60}",
+          "g90": "{red.50}",
+          "g100": "{red.50}"
+        }
+      }
+    },
+    "yellow": {
+      "$type": "color",
+      "$description": "Color for yellow status indicators. Use for caution states, pending items, or situations requiring user awareness.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{yellow.30}",
+          "g10": "{yellow.30}",
+          "g90": "{yellow.30}",
+          "g100": "{yellow.30}"
+        }
+      }
+    },
+    "yellow-outline": {
+      "$type": "color",
+      "$description": "Outline/border color for yellow status indicators in light themes. Provides visual definition for outlined caution status variants.",
+      "$extensions": {
+        "carbon.themes": {
+          "white": "{yellow.60}",
+          "g10": "{yellow.60}"
+        }
+      }
+    }
+  }
+}