@gitlab/ui/src/tokens/semantic/background.tokens.json

GitLab UI Components

{
  "background": {
    "color": {
      "default": {
        "$value": {
          "default": "{color.neutral.0}",
          "dark": "{color.neutral.950}"
        },
        "$type": "color",
        "$description": "Used for the default background color.",
        "$extensions": {
          "com.figma.scopes": [
            "FRAME_FILL",
            "SHAPE_FILL"
          ]
        }
      },
      "subtle": {
        "$value": {
          "default": "{color.neutral.10}",
          "dark": "{color.neutral.900}"
        },
        "$type": "color",
        "$description": "Used to slightly differentiate the background from the default.",
        "$extensions": {
          "com.figma.scopes": [
            "FRAME_FILL",
            "SHAPE_FILL"
          ]
        }
      },
      "strong": {
        "$value": {
          "default": "{color.neutral.50}",
          "dark": "{color.neutral.800}"
        },
        "$type": "color",
        "$description": "Used to make the background easily stand out from the default.",
        "$extensions": {
          "com.figma.scopes": [
            "FRAME_FILL",
            "SHAPE_FILL"
          ]
        }
      },
      "disabled": {
        "$value": {
          "default": "{color.neutral.10}",
          "dark": "{color.neutral.900}"
        },
        "$type": "color",
        "$description": "Used to identify a disabled section.",
        "$extensions": {
          "com.figma.scopes": [
            "FRAME_FILL",
            "SHAPE_FILL"
          ]
        }
      },
      "overlap": {
        "$value": {
          "default": "{color.neutral.0}",
          "dark": "{color.neutral.900}"
        },
        "$type": "color",
        "$description": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.",
        "$extensions": {
          "com.figma.scopes": [
            "FRAME_FILL",
            "SHAPE_FILL"
          ]
        }
      },
      "section": {
        "$value": {
          "default": "{color.neutral.0}",
          "dark": "{color.neutral.800}"
        },
        "$type": "color",
        "$description": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.",
        "$extensions": {
          "com.figma.scopes": [
            "FRAME_FILL",
            "SHAPE_FILL"
          ]
        }
      },
      "overlay": {
        "$value": {
          "default": "{color.alpha.dark.24}",
          "dark": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "alpha": 0.64
          }
        },
        "$type": "color",
        "$description": "Used for an overlay that covers other content.",
        "$extensions": {
          "com.figma.scopes": [
            "FRAME_FILL",
            "SHAPE_FILL"
          ]
        }
      }
    }
  }
}