ropav 0.1.8 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/README.md +13 -4
  2. package/dist/base.css +570 -773
  3. package/dist/calendar.css +45 -34
  4. package/dist/calendar.js +108 -83
  5. package/dist/color-input.css +3 -7
  6. package/dist/color-picker.css +2 -6
  7. package/dist/color-swatch.css +2 -6
  8. package/dist/combobox.css +5 -5
  9. package/dist/componentColors.js +29 -25
  10. package/dist/components/alert/types.d.ts +1 -1
  11. package/dist/components/avatar/types.d.ts +1 -1
  12. package/dist/components/badge/types.d.ts +1 -1
  13. package/dist/components/calendar/index.d.ts +1 -1
  14. package/dist/components/calendar/types.d.ts +3 -0
  15. package/dist/components/date-picker/index.d.ts +1 -1
  16. package/dist/components/date-picker/types.d.ts +3 -1
  17. package/dist/components/pagination/types.d.ts +1 -1
  18. package/dist/components/progress/types.d.ts +1 -1
  19. package/dist/components/segmented-control/types.d.ts +1 -1
  20. package/dist/components/slider/types.d.ts +1 -1
  21. package/dist/components/slider/useSlider.d.ts +1 -1
  22. package/dist/components/slider/useSliderPointer.d.ts +15 -0
  23. package/dist/components/slider/useSliderValueState.d.ts +1 -0
  24. package/dist/components/toast/types.d.ts +1 -1
  25. package/dist/components/toolbar/index.d.ts +3 -0
  26. package/dist/components/toolbar/index.js +2 -0
  27. package/dist/components/toolbar/toolbar.d.ts +24 -0
  28. package/dist/components/toolbar/types.d.ts +12 -0
  29. package/dist/components/toolbar/useToolbar.d.ts +7 -0
  30. package/dist/date-picker.css +9 -9
  31. package/dist/date-picker.js +4 -2
  32. package/dist/dropdown-menu.css +7 -7
  33. package/dist/field.css +1 -1
  34. package/dist/focusNavigation.js +12 -6
  35. package/dist/hover-card.css +1 -1
  36. package/dist/index.d.ts +1 -0
  37. package/dist/index.js +2 -1
  38. package/dist/modal.css +1 -1
  39. package/dist/multi-select.css +5 -5
  40. package/dist/pagination.css +1 -1
  41. package/dist/popover.css +2 -2
  42. package/dist/select.css +5 -5
  43. package/dist/slider.css +80 -71
  44. package/dist/slider.js +91 -16
  45. package/dist/tabs.css +3 -3
  46. package/dist/tags-input.css +1 -1
  47. package/dist/textarea.css +1 -1
  48. package/dist/toast.css +1 -1
  49. package/dist/toolbar.css +15 -0
  50. package/dist/toolbar.js +143 -0
  51. package/dist/tooltip.css +1 -1
  52. package/dist/utils/componentColors.d.ts +2 -4
  53. package/dist/utils/dom/focusNavigation.d.ts +4 -1
  54. package/docs/code-architecture.md +30 -1
  55. package/docs/public-styles-api.md +11 -6
  56. package/docs/releasing.md +39 -0
  57. package/package.json +52 -39
  58. package/src/styles/_mixins.scss +2 -6
  59. package/src/styles/_tokens.scss +4 -833
  60. package/src/styles/generated/showcase.html +274 -0
  61. package/src/styles/generated/tokens.css +592 -0
  62. package/src/styles/generated/tokens.md +583 -0
  63. package/src/styles/generated/tokens.scss +1134 -0
  64. package/tokens/manifest.json +6164 -0
  65. package/docs/public-tokens.md +0 -685
  66. package/src/styles/_variables.scss +0 -243
  67. package/src/styles/styles-manifest.json +0 -5244
package/src/styles/generated/showcase.html ADDED
@@ -0,0 +1,274 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Design tokens</title>
7
+ <link rel="stylesheet" href="./tokens.css" />
8
+ <style>
9
+ :root { color-scheme: light dark; font-family: system-ui, sans-serif; }
10
+ body { margin: 0; padding: 2rem; max-width: 72rem; }
11
+ h1 { font-size: 1.5rem; }
12
+ h3 { font-size: 0.9rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
13
+ .ramp { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
14
+ .swatch { aspect-ratio: 1 / 1.4; display: grid; place-items: end center;
15
+ border-radius: 3px; font-size: 0.65rem; padding-bottom: 0.25rem; }
16
+ .swatch span { mix-blend-mode: difference; color: #fff; }
17
+ table { border-collapse: collapse; font-size: 0.8rem; margin-top: 0.5rem; }
18
+ th, td { border: 1px solid color-mix(in oklab, currentColor 20%, transparent);
19
+ padding: 0.3rem 0.5rem; text-align: left; }
20
+ td.fail { background: color-mix(in oklab, red 18%, transparent); }
21
+ p.note { font-size: 0.8rem; opacity: 0.7; }
22
+ </style>
23
+ </head>
24
+ <body>
25
+ <h1>Design tokens</h1>
26
+ <p class="note">
27
+ Generated by umberkit. Swatches follow the page's colour scheme — switch your
28
+ system theme, or set <code>data-scheme</code> on <code>&lt;html&gt;</code>.
29
+ </p>
30
+ <section class="scale">
31
+ <h3>blue</h3>
32
+ <div class="ramp">
33
+ <div class="swatch" style="background: var(--rp-color-blue-1)" title="color.blue.1"><span>1</span></div>
34
+ <div class="swatch" style="background: var(--rp-color-blue-2)" title="color.blue.2"><span>2</span></div>
35
+ <div class="swatch" style="background: var(--rp-color-blue-3)" title="color.blue.3"><span>3</span></div>
36
+ <div class="swatch" style="background: var(--rp-color-blue-4)" title="color.blue.4"><span>4</span></div>
37
+ <div class="swatch" style="background: var(--rp-color-blue-5)" title="color.blue.5"><span>5</span></div>
38
+ <div class="swatch" style="background: var(--rp-color-blue-6)" title="color.blue.6"><span>6</span></div>
39
+ <div class="swatch" style="background: var(--rp-color-blue-7)" title="color.blue.7"><span>7</span></div>
40
+ <div class="swatch" style="background: var(--rp-color-blue-8)" title="color.blue.8"><span>8</span></div>
41
+ <div class="swatch" style="background: var(--rp-color-blue-9)" title="color.blue.9"><span>9</span></div>
42
+ <div class="swatch" style="background: var(--rp-color-blue-10)" title="color.blue.10"><span>10</span></div>
43
+ <div class="swatch" style="background: var(--rp-color-blue-11)" title="color.blue.11"><span>11</span></div>
44
+ <div class="swatch" style="background: var(--rp-color-blue-12)" title="color.blue.12"><span>12</span></div>
45
+ </div>
46
+ </section>
47
+ <section class="scale">
48
+ <h3>cyan</h3>
49
+ <div class="ramp">
50
+ <div class="swatch" style="background: var(--rp-color-cyan-1)" title="color.cyan.1"><span>1</span></div>
51
+ <div class="swatch" style="background: var(--rp-color-cyan-2)" title="color.cyan.2"><span>2</span></div>
52
+ <div class="swatch" style="background: var(--rp-color-cyan-3)" title="color.cyan.3"><span>3</span></div>
53
+ <div class="swatch" style="background: var(--rp-color-cyan-4)" title="color.cyan.4"><span>4</span></div>
54
+ <div class="swatch" style="background: var(--rp-color-cyan-5)" title="color.cyan.5"><span>5</span></div>
55
+ <div class="swatch" style="background: var(--rp-color-cyan-6)" title="color.cyan.6"><span>6</span></div>
56
+ <div class="swatch" style="background: var(--rp-color-cyan-7)" title="color.cyan.7"><span>7</span></div>
57
+ <div class="swatch" style="background: var(--rp-color-cyan-8)" title="color.cyan.8"><span>8</span></div>
58
+ <div class="swatch" style="background: var(--rp-color-cyan-9)" title="color.cyan.9"><span>9</span></div>
59
+ <div class="swatch" style="background: var(--rp-color-cyan-10)" title="color.cyan.10"><span>10</span></div>
60
+ <div class="swatch" style="background: var(--rp-color-cyan-11)" title="color.cyan.11"><span>11</span></div>
61
+ <div class="swatch" style="background: var(--rp-color-cyan-12)" title="color.cyan.12"><span>12</span></div>
62
+ </div>
63
+ </section>
64
+ <section class="scale">
65
+ <h3>grape</h3>
66
+ <div class="ramp">
67
+ <div class="swatch" style="background: var(--rp-color-grape-1)" title="color.grape.1"><span>1</span></div>
68
+ <div class="swatch" style="background: var(--rp-color-grape-2)" title="color.grape.2"><span>2</span></div>
69
+ <div class="swatch" style="background: var(--rp-color-grape-3)" title="color.grape.3"><span>3</span></div>
70
+ <div class="swatch" style="background: var(--rp-color-grape-4)" title="color.grape.4"><span>4</span></div>
71
+ <div class="swatch" style="background: var(--rp-color-grape-5)" title="color.grape.5"><span>5</span></div>
72
+ <div class="swatch" style="background: var(--rp-color-grape-6)" title="color.grape.6"><span>6</span></div>
73
+ <div class="swatch" style="background: var(--rp-color-grape-7)" title="color.grape.7"><span>7</span></div>
74
+ <div class="swatch" style="background: var(--rp-color-grape-8)" title="color.grape.8"><span>8</span></div>
75
+ <div class="swatch" style="background: var(--rp-color-grape-9)" title="color.grape.9"><span>9</span></div>
76
+ <div class="swatch" style="background: var(--rp-color-grape-10)" title="color.grape.10"><span>10</span></div>
77
+ <div class="swatch" style="background: var(--rp-color-grape-11)" title="color.grape.11"><span>11</span></div>
78
+ <div class="swatch" style="background: var(--rp-color-grape-12)" title="color.grape.12"><span>12</span></div>
79
+ </div>
80
+ </section>
81
+ <section class="scale">
82
+ <h3>gray</h3>
83
+ <div class="ramp">
84
+ <div class="swatch" style="background: var(--rp-color-gray-1)" title="color.gray.1"><span>1</span></div>
85
+ <div class="swatch" style="background: var(--rp-color-gray-2)" title="color.gray.2"><span>2</span></div>
86
+ <div class="swatch" style="background: var(--rp-color-gray-3)" title="color.gray.3"><span>3</span></div>
87
+ <div class="swatch" style="background: var(--rp-color-gray-4)" title="color.gray.4"><span>4</span></div>
88
+ <div class="swatch" style="background: var(--rp-color-gray-5)" title="color.gray.5"><span>5</span></div>
89
+ <div class="swatch" style="background: var(--rp-color-gray-6)" title="color.gray.6"><span>6</span></div>
90
+ <div class="swatch" style="background: var(--rp-color-gray-7)" title="color.gray.7"><span>7</span></div>
91
+ <div class="swatch" style="background: var(--rp-color-gray-8)" title="color.gray.8"><span>8</span></div>
92
+ <div class="swatch" style="background: var(--rp-color-gray-9)" title="color.gray.9"><span>9</span></div>
93
+ <div class="swatch" style="background: var(--rp-color-gray-10)" title="color.gray.10"><span>10</span></div>
94
+ <div class="swatch" style="background: var(--rp-color-gray-11)" title="color.gray.11"><span>11</span></div>
95
+ <div class="swatch" style="background: var(--rp-color-gray-12)" title="color.gray.12"><span>12</span></div>
96
+ </div>
97
+ </section>
98
+ <section class="scale">
99
+ <h3>green</h3>
100
+ <div class="ramp">
101
+ <div class="swatch" style="background: var(--rp-color-green-1)" title="color.green.1"><span>1</span></div>
102
+ <div class="swatch" style="background: var(--rp-color-green-2)" title="color.green.2"><span>2</span></div>
103
+ <div class="swatch" style="background: var(--rp-color-green-3)" title="color.green.3"><span>3</span></div>
104
+ <div class="swatch" style="background: var(--rp-color-green-4)" title="color.green.4"><span>4</span></div>
105
+ <div class="swatch" style="background: var(--rp-color-green-5)" title="color.green.5"><span>5</span></div>
106
+ <div class="swatch" style="background: var(--rp-color-green-6)" title="color.green.6"><span>6</span></div>
107
+ <div class="swatch" style="background: var(--rp-color-green-7)" title="color.green.7"><span>7</span></div>
108
+ <div class="swatch" style="background: var(--rp-color-green-8)" title="color.green.8"><span>8</span></div>
109
+ <div class="swatch" style="background: var(--rp-color-green-9)" title="color.green.9"><span>9</span></div>
110
+ <div class="swatch" style="background: var(--rp-color-green-10)" title="color.green.10"><span>10</span></div>
111
+ <div class="swatch" style="background: var(--rp-color-green-11)" title="color.green.11"><span>11</span></div>
112
+ <div class="swatch" style="background: var(--rp-color-green-12)" title="color.green.12"><span>12</span></div>
113
+ </div>
114
+ </section>
115
+ <section class="scale">
116
+ <h3>indigo</h3>
117
+ <div class="ramp">
118
+ <div class="swatch" style="background: var(--rp-color-indigo-1)" title="color.indigo.1"><span>1</span></div>
119
+ <div class="swatch" style="background: var(--rp-color-indigo-2)" title="color.indigo.2"><span>2</span></div>
120
+ <div class="swatch" style="background: var(--rp-color-indigo-3)" title="color.indigo.3"><span>3</span></div>
121
+ <div class="swatch" style="background: var(--rp-color-indigo-4)" title="color.indigo.4"><span>4</span></div>
122
+ <div class="swatch" style="background: var(--rp-color-indigo-5)" title="color.indigo.5"><span>5</span></div>
123
+ <div class="swatch" style="background: var(--rp-color-indigo-6)" title="color.indigo.6"><span>6</span></div>
124
+ <div class="swatch" style="background: var(--rp-color-indigo-7)" title="color.indigo.7"><span>7</span></div>
125
+ <div class="swatch" style="background: var(--rp-color-indigo-8)" title="color.indigo.8"><span>8</span></div>
126
+ <div class="swatch" style="background: var(--rp-color-indigo-9)" title="color.indigo.9"><span>9</span></div>
127
+ <div class="swatch" style="background: var(--rp-color-indigo-10)" title="color.indigo.10"><span>10</span></div>
128
+ <div class="swatch" style="background: var(--rp-color-indigo-11)" title="color.indigo.11"><span>11</span></div>
129
+ <div class="swatch" style="background: var(--rp-color-indigo-12)" title="color.indigo.12"><span>12</span></div>
130
+ </div>
131
+ </section>
132
+ <section class="scale">
133
+ <h3>lime</h3>
134
+ <div class="ramp">
135
+ <div class="swatch" style="background: var(--rp-color-lime-1)" title="color.lime.1"><span>1</span></div>
136
+ <div class="swatch" style="background: var(--rp-color-lime-2)" title="color.lime.2"><span>2</span></div>
137
+ <div class="swatch" style="background: var(--rp-color-lime-3)" title="color.lime.3"><span>3</span></div>
138
+ <div class="swatch" style="background: var(--rp-color-lime-4)" title="color.lime.4"><span>4</span></div>
139
+ <div class="swatch" style="background: var(--rp-color-lime-5)" title="color.lime.5"><span>5</span></div>
140
+ <div class="swatch" style="background: var(--rp-color-lime-6)" title="color.lime.6"><span>6</span></div>
141
+ <div class="swatch" style="background: var(--rp-color-lime-7)" title="color.lime.7"><span>7</span></div>
142
+ <div class="swatch" style="background: var(--rp-color-lime-8)" title="color.lime.8"><span>8</span></div>
143
+ <div class="swatch" style="background: var(--rp-color-lime-9)" title="color.lime.9"><span>9</span></div>
144
+ <div class="swatch" style="background: var(--rp-color-lime-10)" title="color.lime.10"><span>10</span></div>
145
+ <div class="swatch" style="background: var(--rp-color-lime-11)" title="color.lime.11"><span>11</span></div>
146
+ <div class="swatch" style="background: var(--rp-color-lime-12)" title="color.lime.12"><span>12</span></div>
147
+ </div>
148
+ </section>
149
+ <section class="scale">
150
+ <h3>orange</h3>
151
+ <div class="ramp">
152
+ <div class="swatch" style="background: var(--rp-color-orange-1)" title="color.orange.1"><span>1</span></div>
153
+ <div class="swatch" style="background: var(--rp-color-orange-2)" title="color.orange.2"><span>2</span></div>
154
+ <div class="swatch" style="background: var(--rp-color-orange-3)" title="color.orange.3"><span>3</span></div>
155
+ <div class="swatch" style="background: var(--rp-color-orange-4)" title="color.orange.4"><span>4</span></div>
156
+ <div class="swatch" style="background: var(--rp-color-orange-5)" title="color.orange.5"><span>5</span></div>
157
+ <div class="swatch" style="background: var(--rp-color-orange-6)" title="color.orange.6"><span>6</span></div>
158
+ <div class="swatch" style="background: var(--rp-color-orange-7)" title="color.orange.7"><span>7</span></div>
159
+ <div class="swatch" style="background: var(--rp-color-orange-8)" title="color.orange.8"><span>8</span></div>
160
+ <div class="swatch" style="background: var(--rp-color-orange-9)" title="color.orange.9"><span>9</span></div>
161
+ <div class="swatch" style="background: var(--rp-color-orange-10)" title="color.orange.10"><span>10</span></div>
162
+ <div class="swatch" style="background: var(--rp-color-orange-11)" title="color.orange.11"><span>11</span></div>
163
+ <div class="swatch" style="background: var(--rp-color-orange-12)" title="color.orange.12"><span>12</span></div>
164
+ </div>
165
+ </section>
166
+ <section class="scale">
167
+ <h3>pink</h3>
168
+ <div class="ramp">
169
+ <div class="swatch" style="background: var(--rp-color-pink-1)" title="color.pink.1"><span>1</span></div>
170
+ <div class="swatch" style="background: var(--rp-color-pink-2)" title="color.pink.2"><span>2</span></div>
171
+ <div class="swatch" style="background: var(--rp-color-pink-3)" title="color.pink.3"><span>3</span></div>
172
+ <div class="swatch" style="background: var(--rp-color-pink-4)" title="color.pink.4"><span>4</span></div>
173
+ <div class="swatch" style="background: var(--rp-color-pink-5)" title="color.pink.5"><span>5</span></div>
174
+ <div class="swatch" style="background: var(--rp-color-pink-6)" title="color.pink.6"><span>6</span></div>
175
+ <div class="swatch" style="background: var(--rp-color-pink-7)" title="color.pink.7"><span>7</span></div>
176
+ <div class="swatch" style="background: var(--rp-color-pink-8)" title="color.pink.8"><span>8</span></div>
177
+ <div class="swatch" style="background: var(--rp-color-pink-9)" title="color.pink.9"><span>9</span></div>
178
+ <div class="swatch" style="background: var(--rp-color-pink-10)" title="color.pink.10"><span>10</span></div>
179
+ <div class="swatch" style="background: var(--rp-color-pink-11)" title="color.pink.11"><span>11</span></div>
180
+ <div class="swatch" style="background: var(--rp-color-pink-12)" title="color.pink.12"><span>12</span></div>
181
+ </div>
182
+ </section>
183
+ <section class="scale">
184
+ <h3>primary</h3>
185
+ <div class="ramp">
186
+ <div class="swatch" style="background: var(--rp-color-primary-1)" title="color.primary.1"><span>1</span></div>
187
+ <div class="swatch" style="background: var(--rp-color-primary-2)" title="color.primary.2"><span>2</span></div>
188
+ <div class="swatch" style="background: var(--rp-color-primary-3)" title="color.primary.3"><span>3</span></div>
189
+ <div class="swatch" style="background: var(--rp-color-primary-4)" title="color.primary.4"><span>4</span></div>
190
+ <div class="swatch" style="background: var(--rp-color-primary-5)" title="color.primary.5"><span>5</span></div>
191
+ <div class="swatch" style="background: var(--rp-color-primary-6)" title="color.primary.6"><span>6</span></div>
192
+ <div class="swatch" style="background: var(--rp-color-primary-7)" title="color.primary.7"><span>7</span></div>
193
+ <div class="swatch" style="background: var(--rp-color-primary-8)" title="color.primary.8"><span>8</span></div>
194
+ <div class="swatch" style="background: var(--rp-color-primary-9)" title="color.primary.9"><span>9</span></div>
195
+ <div class="swatch" style="background: var(--rp-color-primary-10)" title="color.primary.10"><span>10</span></div>
196
+ <div class="swatch" style="background: var(--rp-color-primary-11)" title="color.primary.11"><span>11</span></div>
197
+ <div class="swatch" style="background: var(--rp-color-primary-12)" title="color.primary.12"><span>12</span></div>
198
+ </div>
199
+ </section>
200
+ <section class="scale">
201
+ <h3>red</h3>
202
+ <div class="ramp">
203
+ <div class="swatch" style="background: var(--rp-color-red-1)" title="color.red.1"><span>1</span></div>
204
+ <div class="swatch" style="background: var(--rp-color-red-2)" title="color.red.2"><span>2</span></div>
205
+ <div class="swatch" style="background: var(--rp-color-red-3)" title="color.red.3"><span>3</span></div>
206
+ <div class="swatch" style="background: var(--rp-color-red-4)" title="color.red.4"><span>4</span></div>
207
+ <div class="swatch" style="background: var(--rp-color-red-5)" title="color.red.5"><span>5</span></div>
208
+ <div class="swatch" style="background: var(--rp-color-red-6)" title="color.red.6"><span>6</span></div>
209
+ <div class="swatch" style="background: var(--rp-color-red-7)" title="color.red.7"><span>7</span></div>
210
+ <div class="swatch" style="background: var(--rp-color-red-8)" title="color.red.8"><span>8</span></div>
211
+ <div class="swatch" style="background: var(--rp-color-red-9)" title="color.red.9"><span>9</span></div>
212
+ <div class="swatch" style="background: var(--rp-color-red-10)" title="color.red.10"><span>10</span></div>
213
+ <div class="swatch" style="background: var(--rp-color-red-11)" title="color.red.11"><span>11</span></div>
214
+ <div class="swatch" style="background: var(--rp-color-red-12)" title="color.red.12"><span>12</span></div>
215
+ </div>
216
+ </section>
217
+ <section class="scale">
218
+ <h3>teal</h3>
219
+ <div class="ramp">
220
+ <div class="swatch" style="background: var(--rp-color-teal-1)" title="color.teal.1"><span>1</span></div>
221
+ <div class="swatch" style="background: var(--rp-color-teal-2)" title="color.teal.2"><span>2</span></div>
222
+ <div class="swatch" style="background: var(--rp-color-teal-3)" title="color.teal.3"><span>3</span></div>
223
+ <div class="swatch" style="background: var(--rp-color-teal-4)" title="color.teal.4"><span>4</span></div>
224
+ <div class="swatch" style="background: var(--rp-color-teal-5)" title="color.teal.5"><span>5</span></div>
225
+ <div class="swatch" style="background: var(--rp-color-teal-6)" title="color.teal.6"><span>6</span></div>
226
+ <div class="swatch" style="background: var(--rp-color-teal-7)" title="color.teal.7"><span>7</span></div>
227
+ <div class="swatch" style="background: var(--rp-color-teal-8)" title="color.teal.8"><span>8</span></div>
228
+ <div class="swatch" style="background: var(--rp-color-teal-9)" title="color.teal.9"><span>9</span></div>
229
+ <div class="swatch" style="background: var(--rp-color-teal-10)" title="color.teal.10"><span>10</span></div>
230
+ <div class="swatch" style="background: var(--rp-color-teal-11)" title="color.teal.11"><span>11</span></div>
231
+ <div class="swatch" style="background: var(--rp-color-teal-12)" title="color.teal.12"><span>12</span></div>
232
+ </div>
233
+ </section>
234
+ <section class="scale">
235
+ <h3>violet</h3>
236
+ <div class="ramp">
237
+ <div class="swatch" style="background: var(--rp-color-violet-1)" title="color.violet.1"><span>1</span></div>
238
+ <div class="swatch" style="background: var(--rp-color-violet-2)" title="color.violet.2"><span>2</span></div>
239
+ <div class="swatch" style="background: var(--rp-color-violet-3)" title="color.violet.3"><span>3</span></div>
240
+ <div class="swatch" style="background: var(--rp-color-violet-4)" title="color.violet.4"><span>4</span></div>
241
+ <div class="swatch" style="background: var(--rp-color-violet-5)" title="color.violet.5"><span>5</span></div>
242
+ <div class="swatch" style="background: var(--rp-color-violet-6)" title="color.violet.6"><span>6</span></div>
243
+ <div class="swatch" style="background: var(--rp-color-violet-7)" title="color.violet.7"><span>7</span></div>
244
+ <div class="swatch" style="background: var(--rp-color-violet-8)" title="color.violet.8"><span>8</span></div>
245
+ <div class="swatch" style="background: var(--rp-color-violet-9)" title="color.violet.9"><span>9</span></div>
246
+ <div class="swatch" style="background: var(--rp-color-violet-10)" title="color.violet.10"><span>10</span></div>
247
+ <div class="swatch" style="background: var(--rp-color-violet-11)" title="color.violet.11"><span>11</span></div>
248
+ <div class="swatch" style="background: var(--rp-color-violet-12)" title="color.violet.12"><span>12</span></div>
249
+ </div>
250
+ </section>
251
+ <section class="scale">
252
+ <h3>yellow</h3>
253
+ <div class="ramp">
254
+ <div class="swatch" style="background: var(--rp-color-yellow-1)" title="color.yellow.1"><span>1</span></div>
255
+ <div class="swatch" style="background: var(--rp-color-yellow-2)" title="color.yellow.2"><span>2</span></div>
256
+ <div class="swatch" style="background: var(--rp-color-yellow-3)" title="color.yellow.3"><span>3</span></div>
257
+ <div class="swatch" style="background: var(--rp-color-yellow-4)" title="color.yellow.4"><span>4</span></div>
258
+ <div class="swatch" style="background: var(--rp-color-yellow-5)" title="color.yellow.5"><span>5</span></div>
259
+ <div class="swatch" style="background: var(--rp-color-yellow-6)" title="color.yellow.6"><span>6</span></div>
260
+ <div class="swatch" style="background: var(--rp-color-yellow-7)" title="color.yellow.7"><span>7</span></div>
261
+ <div class="swatch" style="background: var(--rp-color-yellow-8)" title="color.yellow.8"><span>8</span></div>
262
+ <div class="swatch" style="background: var(--rp-color-yellow-9)" title="color.yellow.9"><span>9</span></div>
263
+ <div class="swatch" style="background: var(--rp-color-yellow-10)" title="color.yellow.10"><span>10</span></div>
264
+ <div class="swatch" style="background: var(--rp-color-yellow-11)" title="color.yellow.11"><span>11</span></div>
265
+ <div class="swatch" style="background: var(--rp-color-yellow-12)" title="color.yellow.12"><span>12</span></div>
266
+ </div>
267
+ </section>
268
+ <h3>Contrast of each scale's text steps on its own backgrounds</h3>
269
+ <table>
270
+ <thead><tr><th>Text on…</th><th>step 1</th><th>step 2</th><th>step 3</th></tr></thead>
271
+ <tbody><tr><th>blue.11</th><td>4.73 / Lc 72</td><td>4.57 / Lc 69</td><td class="fail">4.26 / Lc 65</td></tr><tr><th>blue.12</th><td>12.07 / Lc 97</td><td>11.67 / Lc 94</td><td>10.88 / Lc 89</td></tr><tr><th>cyan.11</th><td>4.68 / Lc 72</td><td>4.53 / Lc 69</td><td class="fail">4.23 / Lc 65</td></tr><tr><th>cyan.12</th><td>11.91 / Lc 96</td><td>11.52 / Lc 94</td><td>10.76 / Lc 89</td></tr><tr><th>grape.11</th><td>5.24 / Lc 74</td><td>5.05 / Lc 72</td><td>4.69 / Lc 67</td></tr><tr><th>grape.12</th><td>12.65 / Lc 97</td><td>12.20 / Lc 95</td><td>11.31 / Lc 90</td></tr><tr><th>gray.11</th><td>5.31 / Lc 76</td><td>5.13 / Lc 73</td><td>4.78 / Lc 69</td></tr><tr><th>gray.12</th><td>15.15 / Lc 101</td><td>14.64 / Lc 99</td><td>13.65 / Lc 94</td></tr><tr><th>green.11</th><td>4.70 / Lc 71</td><td>4.55 / Lc 69</td><td class="fail">4.26 / Lc 65</td></tr><tr><th>green.12</th><td>11.68 / Lc 96</td><td>11.32 / Lc 94</td><td>10.59 / Lc 89</td></tr><tr><th>indigo.11</th><td>4.94 / Lc 73</td><td>4.77 / Lc 71</td><td class="fail">4.44 / Lc 66</td></tr><tr><th>indigo.12</th><td>12.30 / Lc 97</td><td>11.89 / Lc 95</td><td>11.07 / Lc 90</td></tr><tr><th>lime.11</th><td>4.70 / Lc 72</td><td>4.55 / Lc 69</td><td class="fail">4.26 / Lc 65</td></tr><tr><th>lime.12</th><td>11.77 / Lc 96</td><td>11.40 / Lc 94</td><td>10.67 / Lc 89</td></tr><tr><th>orange.11</th><td>5.09 / Lc 73</td><td>4.91 / Lc 71</td><td>4.56 / Lc 66</td></tr><tr><th>orange.12</th><td>12.49 / Lc 97</td><td>12.06 / Lc 94</td><td>11.20 / Lc 89</td></tr><tr><th>pink.11</th><td>5.21 / Lc 74</td><td>5.02 / Lc 71</td><td>4.66 / Lc 66</td></tr><tr><th>pink.12</th><td>12.63 / Lc 97</td><td>12.18 / Lc 94</td><td>11.29 / Lc 89</td></tr><tr><th>primary.11</th><td>4.73 / Lc 72</td><td>4.57 / Lc 69</td><td class="fail">4.26 / Lc 65</td></tr><tr><th>primary.12</th><td>12.07 / Lc 97</td><td>11.67 / Lc 94</td><td>10.88 / Lc 89</td></tr><tr><th>red.11</th><td>5.19 / Lc 74</td><td>5.01 / Lc 71</td><td>4.65 / Lc 66</td></tr><tr><th>red.12</th><td>12.61 / Lc 97</td><td>12.17 / Lc 94</td><td>11.29 / Lc 89</td></tr><tr><th>teal.11</th><td>4.65 / Lc 71</td><td>4.50 / Lc 69</td><td class="fail">4.21 / Lc 64</td></tr><tr><th>teal.12</th><td>11.71 / Lc 96</td><td>11.34 / Lc 93</td><td>10.61 / Lc 89</td></tr><tr><th>violet.11</th><td>5.15 / Lc 74</td><td>4.97 / Lc 72</td><td>4.62 / Lc 67</td></tr><tr><th>violet.12</th><td>12.53 / Lc 97</td><td>12.11 / Lc 95</td><td>11.26 / Lc 90</td></tr><tr><th>yellow.11</th><td>4.80 / Lc 72</td><td>4.64 / Lc 70</td><td class="fail">4.32 / Lc 65</td></tr><tr><th>yellow.12</th><td>12.18 / Lc 97</td><td>11.78 / Lc 94</td><td>10.97 / Lc 90</td></tr></tbody>
272
+ </table>
273
+ </body>
274
+ </html>