instructure-design-tokens/tokensStudio/canvas/component/Banner.json at 8ccbf6193245de4fe2aabca653373422971525dd · instructure/instructure-design-tokens · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
{
  "banner": {
    "borderRadius": {
      "value": "{semantic.borderRadius.container.md}",
      "type": "borderRadius"
    },
    "relaxedIconBorderRadius": {
      "value": "{semantic.borderRadius.lg}",
      "type": "borderRadius"
    },
    "borderStyle": {
      "value": "solid",
      "type": "other"
    },
    "borderWidth": {
      "value": "{semantic.borderWidth.sm}",
      "type": "borderWidth"
    },
    "color": {
      "value": "{semantic.color.institutional.brandFontColorDark}",
      "type": "color"
    },
    "borderColor": {
      "value": "{semantic.color.stroke.strong}",
      "type": "color",
      "$extensions": {
        "studio.tokens": {
          "modify": {
            "type": "alpha",
            "value": "0.1",
            "space": "hsl"
          }
        }
      }
    },
    "iconColor": {
      "value": "{semantic.color.icon.onColor}",
      "type": "color"
    },
    "violetBackground": {
      "value": "{semantic.color.background.pastel.violet}",
      "type": "color"
    },
    "violetIconBackground": {
      "value": "{semantic.color.background.accent.violet}",
      "type": "color"
    },
    "seaBackground": {
      "value": "{semantic.color.background.pastel.sea}",
      "type": "color"
    },
    "seaIconBackground": {
      "value": "{semantic.color.background.accent.sea}",
      "type": "color"
    },
    "relaxedPaddingVertical": {
      "value": "{semantic.spacing.spaceXl}",
      "type": "spacing"
    },
    "closeButtonMarginRight": {
      "value": "0.5rem",
      "type": "spacing"
    },
    "closeButtonMarginTop": {
      "value": "0.5rem",
      "type": "spacing"
    },
    "contentGapVertical": {
      "value": "{semantic.spacing.spaceSm}",
      "type": "spacing"
    },
    "relaxedPaddingHorizontal": {
      "value": "{semantic.spacing.spaceXl}",
      "type": "spacing"
    },
    "relaxedContentGapHorizontal": {
      "value": "{semantic.spacing.spaceLg}",
      "type": "spacing"
    },
    "compactContentGapHorizontal": {
      "value": "{semantic.spacing.spaceSm}",
      "type": "spacing"
    },
    "compactPaddingHorizontal": {
      "value": "{semantic.spacing.spaceMd}",
      "type": "spacing"
    },
    "compactPaddingVertical": {
      "value": "{semantic.spacing.spaceMd}",
      "type": "spacing"
    },
    "compactIconBorderRadius": {
      "value": "{semantic.borderRadius.md}",
      "type": "borderRadius"
    }
  }
}