Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.cloud.coinbase.com/llms.txt

Use this file to discover all available pages before exploring further.

const colorsSemantic: {
  bg: {
     default: {
        value: "#ffffff";
     };
     alternate: {
        value: "#eef0f3";
     };
     contrast: {
        value: "{colors.fg.default}";
     };
     overlay: {
        value: "{colors.bg.alternate}";
        modify: {
           type: "color-alpha";
           value: 0.33;
        };
     };
     skeleton: {
        value: "{colors.fg.default}";
        modify: {
           type: "color-alpha";
           value: 0.1;
        };
     };
     primary: {
        value: "#0052ff";
     };
     secondary: {
        value: "#eef0f3";
     };
     primaryWash: {
        value: "{colors.fg.primary}";
        modify: {
           type: "color-mix";
           value: readonly [readonly ["{colors.bg.default}", "92%"]];
        };
     };
     positiveWash: {
        value: "{colors.fg.positive}";
        modify: {
           type: "color-mix";
           value: readonly [readonly ["{colors.bg.default}", "92%"]];
        };
     };
     negativeWash: {
        value: "{colors.fg.negative}";
        modify: {
           type: "color-mix";
           value: readonly [readonly ["{colors.bg.default}", "92%"]];
        };
     };
     warningWash: {
        value: "{colors.fg.warning}";
        modify: {
           type: "color-mix";
           value: readonly [readonly ["{colors.bg.default}", "92%"]];
        };
     };
  };
  fg: {
     default: {
        value: "#0a0b0d";
     };
     muted: {
        value: "#5b616e";
     };
     primary: {
        value: "#0052ff";
     };
     onPrimary: {
        value: "#ffffff";
     };
     onSecondary: {
        value: "#0a0b0d";
     };
     positive: {
        value: "#098551";
     };
     negative: {
        value: "#cf202f";
     };
     warning: {
        value: "#ed702f";
     };
     onPrimaryWash: {
        value: "{colors.fg.onPrimary}";
     };
     onPositiveWash: {
        value: "{colors.fg.default}";
     };
     onNegativeWash: {
        value: "{colors.fg.default}";
     };
     onWarningWash: {
        value: "{colors.fg.default}";
     };
  };
  line: {
     default: {
        value: "#dcdfe4";
     };
     heavy: {
        value: "#9397a0";
     };
     primary: {
        value: "{colors.fg.primary}";
     };
     positive: {
        value: "{colors.fg.positive}";
     };
     negative: {
        value: "{colors.fg.negative}";
     };
  };
};
These are the default values for the semantic color tokens. Semantic colors are the base colors for the theme. They are typically not used directly in the components, but are used to define the base colors for the components.

​
Type declaration

NameTypeDefault value
bg{ default: { value: "#ffffff"; }; alternate: { value: "#eef0f3"; }; contrast: { value: "{colors.fg.default}"; }; overlay: { value: "{colors.bg.alternate}"; modify: { type: "color-alpha"; value: 0.33; }; }; skeleton: { value: "{colors.fg.default}"; modify: { type: "color-alpha"; value: 0.1; }; }; primary: { value: "#0052ff"; }; secondary: { value: "#eef0f3"; }; primaryWash: { value: "{colors.fg.primary}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }; positiveWash: { value: "{colors.fg.positive}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }; negativeWash: { value: "{colors.fg.negative}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }; warningWash: { value: "{colors.fg.warning}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }; }-
bg.default{ value: "#ffffff"; }-
bg.default.value"#ffffff"colorsBase.white
bg.alternate{ value: "#eef0f3"; }-
bg.alternate.value"#eef0f3"colorsBase.gray100
bg.contrast{ value: "{colors.fg.default}"; }-
bg.contrast.value"{colors.fg.default}""{colors.fg.default}"
bg.overlay{ value: "{colors.bg.alternate}"; modify: { type: "color-alpha"; value: 0.33; }; }-
bg.overlay.value"{colors.bg.alternate}""{colors.bg.alternate}"
bg.overlay.modify{ type: "color-alpha"; value: 0.33; }-
bg.overlay.modify.type"color-alpha""color-alpha"
bg.overlay.modify.value0.330.33
bg.skeleton{ value: "{colors.fg.default}"; modify: { type: "color-alpha"; value: 0.1; }; }-
bg.skeleton.value"{colors.fg.default}""{colors.fg.default}"
bg.skeleton.modify{ type: "color-alpha"; value: 0.1; }-
bg.skeleton.modify.type"color-alpha""color-alpha"
bg.skeleton.modify.value0.10.1
bg.primary{ value: "#0052ff"; }-
bg.primary.value"#0052ff"colorsBase.blue500
bg.secondary{ value: "#eef0f3"; }-
bg.secondary.value"#eef0f3"colorsBase.gray100
bg.primaryWash{ value: "{colors.fg.primary}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }-
bg.primaryWash.value"{colors.fg.primary}""{colors.fg.primary}"
bg.primaryWash.modify{ type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }-
bg.primaryWash.modify.type"color-mix""color-mix"
bg.primaryWash.modify.valuereadonly [readonly ["{colors.bg.default}", "92%"]]-
bg.positiveWash{ value: "{colors.fg.positive}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }-
bg.positiveWash.value"{colors.fg.positive}""{colors.fg.positive}"
bg.positiveWash.modify{ type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }-
bg.positiveWash.modify.type"color-mix""color-mix"
bg.positiveWash.modify.valuereadonly [readonly ["{colors.bg.default}", "92%"]]-
bg.negativeWash{ value: "{colors.fg.negative}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }-
bg.negativeWash.value"{colors.fg.negative}""{colors.fg.negative}"
bg.negativeWash.modify{ type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }-
bg.negativeWash.modify.type"color-mix""color-mix"
bg.negativeWash.modify.valuereadonly [readonly ["{colors.bg.default}", "92%"]]-
bg.warningWash{ value: "{colors.fg.warning}"; modify: { type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }; }-
bg.warningWash.value"{colors.fg.warning}""{colors.fg.warning}"
bg.warningWash.modify{ type: "color-mix"; value: readonly [readonly ["{colors.bg.default}", "92%"]]; }-
bg.warningWash.modify.type"color-mix""color-mix"
bg.warningWash.modify.valuereadonly [readonly ["{colors.bg.default}", "92%"]]-
fg{ default: { value: "#0a0b0d"; }; muted: { value: "#5b616e"; }; primary: { value: "#0052ff"; }; onPrimary: { value: "#ffffff"; }; onSecondary: { value: "#0a0b0d"; }; positive: { value: "#098551"; }; negative: { value: "#cf202f"; }; warning: { value: "#ed702f"; }; onPrimaryWash: { value: "{colors.fg.onPrimary}"; }; onPositiveWash: { value: "{colors.fg.default}"; }; onNegativeWash: { value: "{colors.fg.default}"; }; onWarningWash: { value: "{colors.fg.default}"; }; }-
fg.default{ value: "#0a0b0d"; }-
fg.default.value"#0a0b0d"colorsBase.black
fg.muted{ value: "#5b616e"; }-
fg.muted.value"#5b616e"colorsBase.gray700
fg.primary{ value: "#0052ff"; }-
fg.primary.value"#0052ff"colorsBase.blue500
fg.onPrimary{ value: "#ffffff"; }-
fg.onPrimary.value"#ffffff"colorsBase.white
fg.onSecondary{ value: "#0a0b0d"; }-
fg.onSecondary.value"#0a0b0d"colorsBase.black
fg.positive{ value: "#098551"; }-
fg.positive.value"#098551"colorsBase.green500
fg.negative{ value: "#cf202f"; }-
fg.negative.value"#cf202f"colorsBase.red500
fg.warning{ value: "#ed702f"; }-
fg.warning.value"#ed702f"colorsBase.amber500
fg.onPrimaryWash{ value: "{colors.fg.onPrimary}"; }-
fg.onPrimaryWash.value"{colors.fg.onPrimary}""{colors.fg.onPrimary}"
fg.onPositiveWash{ value: "{colors.fg.default}"; }-
fg.onPositiveWash.value"{colors.fg.default}""{colors.fg.default}"
fg.onNegativeWash{ value: "{colors.fg.default}"; }-
fg.onNegativeWash.value"{colors.fg.default}""{colors.fg.default}"
fg.onWarningWash{ value: "{colors.fg.default}"; }-
fg.onWarningWash.value"{colors.fg.default}""{colors.fg.default}"
line{ default: { value: "#dcdfe4"; }; heavy: { value: "#9397a0"; }; primary: { value: "{colors.fg.primary}"; }; positive: { value: "{colors.fg.positive}"; }; negative: { value: "{colors.fg.negative}"; }; }-
line.default{ value: "#dcdfe4"; }-
line.default.value"#dcdfe4"colorsBase.gray200
line.heavy{ value: "#9397a0"; }-
line.heavy.value"#9397a0"colorsBase.gray500
line.primary{ value: "{colors.fg.primary}"; }-
line.primary.value"{colors.fg.primary}""{colors.fg.primary}"
line.positive{ value: "{colors.fg.positive}"; }-
line.positive.value"{colors.fg.positive}""{colors.fg.positive}"
line.negative{ value: "{colors.fg.negative}"; }-
line.negative.value"{colors.fg.negative}""{colors.fg.negative}"

​
See

colorsComponents for the component colors that inherit from these