From 9e8995e2fe39478cb643284b178de6e7bd292697 Mon Sep 17 00:00:00 2001 From: Frank Karstens Date: Fri, 23 Feb 2024 17:03:44 +0100 Subject: [PATCH 01/16] feat: add prettier config and test npm script --- .prettierignore | 4 + .prettierrc | 7 + docs/ui/src/APCAlookup.js | 254 +++---- docs/ui/src/demo.css | 8 +- docs/ui/src/demo.js | 264 +++---- docs/ui/src/htmlHead.html | 106 +-- docs/ui/src/index.js | 164 +++-- docs/ui/src/js/addBulkDialog.js | 62 +- docs/ui/src/js/addColorsFromImage.js | 66 +- docs/ui/src/js/addFromURL.js | 45 +- docs/ui/src/js/addLightnessBulkDialog.js | 45 +- docs/ui/src/js/addScaleBulkDialog.js | 79 +-- docs/ui/src/js/bulkConvertDialog.js | 175 ++--- docs/ui/src/js/chroma-plus.js | 84 +-- docs/ui/src/js/colorDetailsPanel.js | 648 ++++++++---------- docs/ui/src/js/colorScale.js | 109 ++- docs/ui/src/js/colorScaleDiverging.js | 176 ++--- docs/ui/src/js/colorScaleQualitative.js | 331 ++++----- docs/ui/src/js/colorScaleSequential.js | 112 ++- docs/ui/src/js/colorWheel.js | 303 +++----- docs/ui/src/js/compareColors.js | 176 ++--- docs/ui/src/js/convertColors.js | 198 ++---- docs/ui/src/js/create3dModel.js | 198 ++---- docs/ui/src/js/createBaseScaleOptions.js | 21 +- docs/ui/src/js/createChart.js | 312 +++------ docs/ui/src/js/createDemos.js | 18 +- docs/ui/src/js/createHtmlElement.js | 28 +- docs/ui/src/js/createInterpolationCharts.js | 96 +-- docs/ui/src/js/createOutputColors.js | 219 +++--- docs/ui/src/js/createOutputParameters.js | 87 +-- docs/ui/src/js/createPaletteCharts.js | 118 ++-- docs/ui/src/js/createPanelReportTable.js | 125 ++-- docs/ui/src/js/createRGBchannelChart.js | 40 +- docs/ui/src/js/createRatioChart.js | 123 +--- docs/ui/src/js/createSVGgradient.js | 64 +- docs/ui/src/js/createSVGswatches.js | 102 ++- docs/ui/src/js/createSVGuiKit.js | 191 +++--- docs/ui/src/js/createSamples.js | 45 +- docs/ui/src/js/createTable.js | 30 +- docs/ui/src/js/createXML.js | 75 +- docs/ui/src/js/cvdColors.js | 42 +- docs/ui/src/js/d3.js | 16 +- docs/ui/src/js/demos/demo_chord.js | 49 +- docs/ui/src/js/demos/demo_choropleth.js | 49 +- docs/ui/src/js/demos/demo_density.js | 46 +- docs/ui/src/js/demos/demo_donut.js | 30 +- docs/ui/src/js/demos/demo_heatmap.js | 51 +- docs/ui/src/js/demos/demo_hexbin.js | 65 +- docs/ui/src/js/demos/demo_scatter.js | 47 +- docs/ui/src/js/demos/demo_stackedArea.js | 38 +- docs/ui/src/js/demos/demo_violinJitter.js | 81 +-- docs/ui/src/js/getThemeData.js | 16 +- docs/ui/src/js/initialDivergingScale.js | 56 +- docs/ui/src/js/initialQualitativeScale.js | 142 ++-- docs/ui/src/js/initialSequentialScale.js | 73 +- docs/ui/src/js/initialTheme.js | 14 +- docs/ui/src/js/keyColors.js | 111 ++- docs/ui/src/js/pageLoader.js | 6 +- docs/ui/src/js/params.js | 110 ++- docs/ui/src/js/polarColorPath.js | 66 +- docs/ui/src/js/popover.js | 52 +- docs/ui/src/js/predefinedColorNames.js | 80 +-- docs/ui/src/js/ramps.js | 105 ++- docs/ui/src/js/ratios.js | 277 ++++---- docs/ui/src/js/scaleKeyColors.js | 196 +++--- docs/ui/src/js/sliderInput.js | 60 +- docs/ui/src/js/sortColorScales.js | 20 +- docs/ui/src/js/tabs.js | 137 ++-- docs/ui/src/js/themeTitle.js | 16 +- docs/ui/src/js/themeUpdate.js | 80 +-- docs/ui/src/js/toast.js | 34 +- docs/ui/src/js/toggleSwatchAttributes.js | 14 +- docs/ui/src/js/tooltip.js | 8 +- docs/ui/src/js/utils.js | 275 +++----- docs/ui/src/scales.html | 54 +- docs/ui/src/scales.js | 206 +++--- docs/ui/src/scss/colorinputs.scss | 38 +- docs/ui/src/scss/components/articleCard.scss | 6 +- docs/ui/src/scss/components/colorPicker.scss | 2 +- docs/ui/src/scss/components/colorSlider.scss | 209 +----- docs/ui/src/scss/components/dialog.scss | 62 +- docs/ui/src/scss/components/header.scss | 3 +- .../src/scss/components/outputSwatches.scss | 4 +- docs/ui/src/scss/components/sections.scss | 2 +- docs/ui/src/scss/components/selectBox.scss | 7 +- docs/ui/src/scss/components/textfield.scss | 5 +- docs/ui/src/scss/converter.scss | 10 +- docs/ui/src/scss/style.scss | 274 +++----- docs/ui/src/theme.html | 4 +- docs/ui/src/theme.js | 266 ++++--- docs/ui/src/tools.html | 45 +- docs/ui/src/tools.js | 182 +++-- docs/ui/src/views/GithubLink.html | 14 +- docs/ui/src/views/LogoLink.html | 6 +- .../src/views/dialog_bulkColorConverter.html | 326 ++------- docs/ui/src/views/dialog_importURL.html | 30 +- docs/ui/src/views/footer.html | 4 +- docs/ui/src/views/header.html | 23 +- docs/ui/src/views/header_scales.html | 63 +- docs/ui/src/views/header_tools.html | 33 +- docs/ui/src/views/home_articles.html | 118 +--- docs/ui/src/views/home_contribute.html | 4 +- docs/ui/src/views/home_learn.html | 105 +-- docs/ui/src/views/home_main.html | 194 ++---- docs/ui/src/views/home_sidenav.html | 22 +- docs/ui/src/views/tab_colorCompare.html | 166 +---- docs/ui/src/views/tab_colorConverter.html | 54 +- docs/ui/src/views/tab_swatches.html | 66 +- docs/ui/src/views/tab_theme.html | 119 +--- docs/ui/src/views/toast_cvdPreview.html | 20 +- package.json | 7 +- 111 files changed, 3936 insertions(+), 6587 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..ecae0fdb --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +node_modules/ +*.min.js +*.map +*.snap diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..feb9e644 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "tabWidth": 2, + "printWidth": 256, + "singleQuote": true, + "bracketSpacing": false, + "trailingComma": "none" +} diff --git a/docs/ui/src/APCAlookup.js b/docs/ui/src/APCAlookup.js index 63edbab7..ea77cfec 100644 --- a/docs/ui/src/APCAlookup.js +++ b/docs/ui/src/APCAlookup.js @@ -1,158 +1,158 @@ const apcaLookup = { 10: { - 100: "", - 200: "", - 300: "", - 400: "", - 500: "", - 600: "", - 700: "", - 800: "", - 900: "", + 100: '', + 200: '', + 300: '', + 400: '', + 500: '', + 600: '', + 700: '', + 800: '', + 900: '' }, 11: { - 100: "", - 200: "", - 300: "", - 400: "", - 500: "", - 600: "", - 700: "", - 800: "", - 900: "", + 100: '', + 200: '', + 300: '', + 400: '', + 500: '', + 600: '', + 700: '', + 800: '', + 900: '' }, 12: { - 100: "", - 200: "", - 300: "", - 400: "", - 500: "", - 600: "", - 700: "", - 800: "", - 900: "", + 100: '', + 200: '', + 300: '', + 400: '', + 500: '', + 600: '', + 700: '', + 800: '', + 900: '' }, 14: { - 100: "", - 200: "", - 300: "", - 400: "100", - 500: "90", - 600: "80", - 700: "60", - 800: "", - 900: "", + 100: '', + 200: '', + 300: '', + 400: '100', + 500: '90', + 600: '80', + 700: '60', + 800: '', + 900: '' }, 16: { - 100: "", - 200: "", - 300: "100", - 400: "90", - 500: "80", - 600: "60", - 700: "55", - 800: "", - 900: "", + 100: '', + 200: '', + 300: '100', + 400: '90', + 500: '80', + 600: '60', + 700: '55', + 800: '', + 900: '' }, 18: { - 100: "", - 200: "", - 300: "90", - 400: "80", - 500: "60", - 600: "55", - 700: "50", - 800: "", - 900: "", + 100: '', + 200: '', + 300: '90', + 400: '80', + 500: '60', + 600: '55', + 700: '50', + 800: '', + 900: '' }, 24: { - 100: "", - 200: "100", - 300: "80", - 400: "60", - 500: "55", - 600: "50", - 700: "40", - 800: "38", - 900: "", + 100: '', + 200: '100', + 300: '80', + 400: '60', + 500: '55', + 600: '50', + 700: '40', + 800: '38', + 900: '' }, 30: { - 100: "", - 200: "90", - 300: "70", - 400: "55", - 500: "50", - 600: "40", - 700: "38", - 800: "35", - 900: "30", + 100: '', + 200: '90', + 300: '70', + 400: '55', + 500: '50', + 600: '40', + 700: '38', + 800: '35', + 900: '30' }, 36: { - 100: "", - 200: "80", - 300: "60", - 400: "50", - 500: "40", - 600: "38", - 700: "35", - 800: "30", - 900: "25", + 100: '', + 200: '80', + 300: '60', + 400: '50', + 500: '40', + 600: '38', + 700: '35', + 800: '30', + 900: '25' }, 48: { - 100: "100", - 200: "70", - 300: "55", - 400: "40", - 500: "38", - 600: "35", - 700: "30", - 800: "25", - 900: ">20", + 100: '100', + 200: '70', + 300: '55', + 400: '40', + 500: '38', + 600: '35', + 700: '30', + 800: '25', + 900: '>20' }, 60: { - 100: "90", - 200: "60", - 300: "50", - 400: "38", - 500: "35", - 600: "30", - 700: "25", - 800: ">20", - 900: ">20", + 100: '90', + 200: '60', + 300: '50', + 400: '38', + 500: '35', + 600: '30', + 700: '25', + 800: '>20', + 900: '>20' }, 72: { - 100: "80", - 200: "55", - 300: "40", - 400: "35", - 500: "30", - 600: "25", - 700: ">20", - 800: ">20", - 900: ">20", + 100: '80', + 200: '55', + 300: '40', + 400: '35', + 500: '30', + 600: '25', + 700: '>20', + 800: '>20', + 900: '>20' }, 96: { - 100: "70", - 200: "50", - 300: "35", - 400: "30", - 500: "25", - 600: ">20", - 700: ">20", - 800: ">20", - 900: ">20", + 100: '70', + 200: '50', + 300: '35', + 400: '30', + 500: '25', + 600: '>20', + 700: '>20', + 800: '>20', + 900: '>20' }, 120: { - 100: "60", - 200: "40", - 300: "30", - 400: "25", - 500: ">20", - 600: ">20", - 700: ">20", - 800: ">20", - 900: ">20", - }, + 100: '60', + 200: '40', + 300: '30', + 400: '25', + 500: '>20', + 600: '>20', + 700: '>20', + 800: '>20', + 900: '>20' + } }; export default apcaLookup; diff --git a/docs/ui/src/demo.css b/docs/ui/src/demo.css index 7559ee8b..9b23c180 100644 --- a/docs/ui/src/demo.css +++ b/docs/ui/src/demo.css @@ -18,7 +18,7 @@ governing permissions and limitations under the License. // Grays: // http://localhost:8080/?color=707080&base=fafafb&tint=cacad0&shade=333351&ratios=1%2C1.25%2C1.94%2C3%2C3.99%2C5.22%2C6.96%2C9.3%2C12.45%2C15&mode=LAB */ -@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800&display=swap"); +@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800&display=swap'); :root { /* Alias global values for contextual use */ --blueBackground: var(--blue100); @@ -62,7 +62,7 @@ body { flex-direction: column; height: 100vh; overflow: hidden; - font-family: "Nunito", sans-serif; + font-family: 'Nunito', sans-serif; } header { color: #000000; @@ -100,7 +100,7 @@ label { grid-template-columns: auto var(--detail-width); grid-column-gap: 0px; grid-row-gap: 0px; - grid-template-areas: "master detail"; + grid-template-areas: 'master detail'; overflow: hidden; height: calc(100vh - 48px); } @@ -413,7 +413,7 @@ label { } li.active::after { - content: " "; + content: ' '; position: absolute; display: block; width: 100%; diff --git a/docs/ui/src/demo.js b/docs/ui/src/demo.js index 7c4d0fb0..4298d896 100644 --- a/docs/ui/src/demo.js +++ b/docs/ui/src/demo.js @@ -10,99 +10,86 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import "./demo.css"; +import * as Leo from '@adobe/leonardo-contrast-colors'; +import './demo.css'; // Define colors and ratios let baseRatios = [-1.1, 1, 1.12, 1.25, 1.45, 1.75, 2.25, 3.01, 4.52, 7, 11, 16]; let uiRatios = [1, 1.12, 1.3, 2, 3.01, 4.52, 7, 11, 16]; let purpleScale = new Leo.Color({ - name: "purple", - colorKeys: ["#7a4beb", "#ac80f4", "#2f0071"], - colorspace: "LAB", - ratios: uiRatios, + name: 'purple', + colorKeys: ['#7a4beb', '#ac80f4', '#2f0071'], + colorspace: 'LAB', + ratios: uiRatios }); let blueScale = new Leo.Color({ - name: "blue", - colorKeys: ["#0272d4", "#b2f0ff", "#55cfff", "#0037d7"], - colorspace: "CAM02", - ratios: uiRatios, + name: 'blue', + colorKeys: ['#0272d4', '#b2f0ff', '#55cfff', '#0037d7'], + colorspace: 'CAM02', + ratios: uiRatios }); let greenScale = new Leo.Color({ - name: "green", - colorKeys: ["#4eb076", "#2a5a45", "#a7e3b4"], - colorspace: "HSL", - ratios: uiRatios, + name: 'green', + colorKeys: ['#4eb076', '#2a5a45', '#a7e3b4'], + colorspace: 'HSL', + ratios: uiRatios }); let redScale = new Leo.Color({ - name: "red", - colorKeys: ["#ea2825", "#ffc1ad", "#fd937e"], - colorspace: "LAB", - ratios: uiRatios, + name: 'red', + colorKeys: ['#ea2825', '#ffc1ad', '#fd937e'], + colorspace: 'LAB', + ratios: uiRatios }); let goldScale = new Leo.Color({ - name: "gold", - colorKeys: ["#e8b221", "#a06a00", "#ffdd7c"], - colorspace: "HSL", - ratios: uiRatios, + name: 'gold', + colorKeys: ['#e8b221', '#a06a00', '#ffdd7c'], + colorspace: 'HSL', + ratios: uiRatios }); let grayScale = new Leo.BackgroundColor({ - name: "gray", - colorKeys: ["#4a5b7b", "#72829c", "#a6b2c6"], - colorspace: "HSL", - ratios: baseRatios, + name: 'gray', + colorKeys: ['#4a5b7b', '#72829c', '#a6b2c6'], + colorspace: 'HSL', + ratios: baseRatios }); let myTheme = new Leo.Theme({ backgroundColor: grayScale, colors: [grayScale, purpleScale, blueScale, greenScale, redScale, goldScale], lightness: 100, - contrast: 1, + contrast: 1 }); function setup() { - let br = document.getElementById("sliderBrightness"); - br.min = "0"; - br.max = "100"; - br.defaultValue = "95"; - - let calendar = document.getElementById("calendar"); - calendar.innerHTML = " "; - - let monthNames = [ - "Jan", - "Feb", - "Mar", - "Apr", - "May", - "Jun", - "Jul", - "Aug", - "Sep", - "Oct", - "Nov", - "Dec", - ]; + let br = document.getElementById('sliderBrightness'); + br.min = '0'; + br.max = '100'; + br.defaultValue = '95'; + + let calendar = document.getElementById('calendar'); + calendar.innerHTML = ' '; + + let monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; let d = new Date(); let month = monthNames[d.getMonth()]; let colNum = 5; for (let i = 0; i < colNum; i++) { - let col = document.createElement("div"); - col.className = "calendarColumn"; - col.id = "calendarColumn" + i; + let col = document.createElement('div'); + col.className = 'calendarColumn'; + col.id = 'calendarColumn' + i; - let head = document.createElement("div"); - head.className = "calendarColumnHeader"; + let head = document.createElement('div'); + head.className = 'calendarColumnHeader'; let today = new Date(); - let date = month + " " + (today.getDate() + i); + let date = month + ' ' + (today.getDate() + i); head.innerHTML = date; @@ -110,10 +97,10 @@ function setup() { let hours = 18; for (let i = 0; i < hours; i++) { - let half = document.createElement("div"); - let full = document.createElement("div"); - half.className = "calendar30"; - full.className = "calendar60"; + let half = document.createElement('div'); + let full = document.createElement('div'); + half.className = 'calendar30'; + full.className = 'calendar60'; col.appendChild(half); col.appendChild(full); @@ -126,149 +113,94 @@ setup(); function createEvent(col, dur, title, meta, cat, pos, width, customClass) { if (!width) { - width = "eventSingle"; + width = 'eventSingle'; } // pos is position related to half-hour increments. Ie, how many rows down. - let en = document.createElement("div"); - let head = document.createElement("span"); + let en = document.createElement('div'); + let head = document.createElement('span'); let t = document.createTextNode(title); - head.className = "eventTitle"; + head.className = 'eventTitle'; head.appendChild(t); - let detail = document.createElement("span"); + let detail = document.createElement('span'); let d = document.createTextNode(meta); - detail.className = "eventMeta"; + detail.className = 'eventMeta'; detail.appendChild(d); - en.classList.add("event", dur, cat, width, customClass); + en.classList.add('event', dur, cat, width, customClass); en.appendChild(head); en.appendChild(detail); - en.style.top = 56 + pos * 33 + "px"; + en.style.top = 56 + pos * 33 + 'px'; col.appendChild(en); } -let col0 = document.getElementById("calendarColumn0"); -let col1 = document.getElementById("calendarColumn1"); -let col2 = document.getElementById("calendarColumn2"); -let col3 = document.getElementById("calendarColumn3"); -let col4 = document.getElementById("calendarColumn4"); +let col0 = document.getElementById('calendarColumn0'); +let col1 = document.getElementById('calendarColumn1'); +let col2 = document.getElementById('calendarColumn2'); +let col3 = document.getElementById('calendarColumn3'); +let col4 = document.getElementById('calendarColumn4'); // Populate calendar with events // Col 0 -createEvent(col0, "event30", "Gym", "-", "catPersonal", 1, "eventDouble"); -createEvent( - col0, - "event90", - "Office Hour", - "UT-331", - "catPrimary", - 1, - "eventDouble", -); -createEvent(col0, "event60", "Research Planning", "UT-105", "catDefault", 6); -createEvent(col0, "event90", "Office Hour", "UT-201", "catPrimary", 10); -createEvent(col0, "event60", "Project Sync", "UT-220", "catBlue", 16); +createEvent(col0, 'event30', 'Gym', '-', 'catPersonal', 1, 'eventDouble'); +createEvent(col0, 'event90', 'Office Hour', 'UT-331', 'catPrimary', 1, 'eventDouble'); +createEvent(col0, 'event60', 'Research Planning', 'UT-105', 'catDefault', 6); +createEvent(col0, 'event90', 'Office Hour', 'UT-201', 'catPrimary', 10); +createEvent(col0, 'event60', 'Project Sync', 'UT-220', 'catBlue', 16); // Col 1 -createEvent(col1, "event30", "Gym", "-", "catPersonal", 1); -createEvent(col1, "event120", "Employee Meeting", "UT-203", "catImportant", 4); -createEvent( - col1, - "event90", - "Leonardo integration", - "https://leonardocolor.io", - "catBlue", - 12, - "eventSingle", - "is-selected", -); +createEvent(col1, 'event30', 'Gym', '-', 'catPersonal', 1); +createEvent(col1, 'event120', 'Employee Meeting', 'UT-203', 'catImportant', 4); +createEvent(col1, 'event90', 'Leonardo integration', 'https://leonardocolor.io', 'catBlue', 12, 'eventSingle', 'is-selected'); // Col 2 -createEvent(col2, "event30", "Gym", "-", "catPersonal", 1); -createEvent(col2, "event60", "Workshop", "UT-440", "catBlue", 4); -createEvent( - col2, - "event90", - "Office Hour", - "UT-201", - "catPrimary", - 10, - "eventDouble", -); -createEvent( - col2, - "event30", - "Color sync", - "UT-220", - "catDefault", - 10, - "eventDouble", -); -createEvent(col2, "event30", "Submission Deadline", "-", "catUrgent", 18); +createEvent(col2, 'event30', 'Gym', '-', 'catPersonal', 1); +createEvent(col2, 'event60', 'Workshop', 'UT-440', 'catBlue', 4); +createEvent(col2, 'event90', 'Office Hour', 'UT-201', 'catPrimary', 10, 'eventDouble'); +createEvent(col2, 'event30', 'Color sync', 'UT-220', 'catDefault', 10, 'eventDouble'); +createEvent(col2, 'event30', 'Submission Deadline', '-', 'catUrgent', 18); // Col 3 -createEvent(col3, "event30", "Gym", "-", "catPersonal", 1); -createEvent(col3, "event60", "User Interview", "UT-203", "catDefault", 4); -createEvent(col3, "event60", "User Interview", "UT-203", "catDefault", 7); -createEvent(col3, "event60", "User Interview", "UT-203", "catDefault", 12); -createEvent( - col3, - "event120", - "Sprint Demo", - "UT-440", - "catImportant", - 16, - "eventDouble", -); -createEvent( - col3, - "event60", - "Color palette review", - "UT-330", - "catBlue", - 19, - "eventDouble", -); +createEvent(col3, 'event30', 'Gym', '-', 'catPersonal', 1); +createEvent(col3, 'event60', 'User Interview', 'UT-203', 'catDefault', 4); +createEvent(col3, 'event60', 'User Interview', 'UT-203', 'catDefault', 7); +createEvent(col3, 'event60', 'User Interview', 'UT-203', 'catDefault', 12); +createEvent(col3, 'event120', 'Sprint Demo', 'UT-440', 'catImportant', 16, 'eventDouble'); +createEvent(col3, 'event60', 'Color palette review', 'UT-330', 'catBlue', 19, 'eventDouble'); // Col 4 -createEvent(col4, "event30", "Gym", "-", "catPersonal", 1); -createEvent(col4, "event60", "Workshop", "UT-440", "catBlue", 4); -createEvent(col4, "event120", "Backlog grooming", "UT-112", "catPrimary", 8); +createEvent(col4, 'event30', 'Gym', '-', 'catPersonal', 1); +createEvent(col4, 'event60', 'Workshop', 'UT-440', 'catBlue', 4); +createEvent(col4, 'event120', 'Backlog grooming', 'UT-112', 'catPrimary', 8); function createColors() { - let br = document.getElementById("sliderBrightness"); - let con = document.getElementById("sliderContrast"); - let sat = document.getElementById("sliderSaturation"); - let mode = document.getElementById("darkMode"); + let br = document.getElementById('sliderBrightness'); + let con = document.getElementById('sliderContrast'); + let sat = document.getElementById('sliderSaturation'); + let mode = document.getElementById('darkMode'); let brVal = Number(br.value); let conVal = Number(con.value); let satVal = Number(sat.value); if (mode.checked == true) { - br.min = "0"; - br.max = "30"; + br.min = '0'; + br.max = '30'; if (brVal > 30) { brVal = 15; br.value = 15; } - document.documentElement.style.setProperty( - "--shadow-color", - "rgba(0, 0, 0, 0.5)", - ); + document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.5)'); } else { - br.min = "85"; - br.max = "100"; + br.min = '85'; + br.max = '100'; if (brVal < 80) { brVal = 95; br.value = 95; } - document.documentElement.style.setProperty( - "--shadow-color", - "rgba(0, 0, 0, 0.1)", - ); + document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)'); } myTheme.lightness = brVal; @@ -283,15 +215,9 @@ function createColors() { } createColors(); -document.getElementById("darkMode").addEventListener("input", createColors); -document - .getElementById("sliderBrightness") - .addEventListener("input", createColors); -document - .getElementById("sliderContrast") - .addEventListener("input", createColors); -document - .getElementById("sliderSaturation") - .addEventListener("input", createColors); +document.getElementById('darkMode').addEventListener('input', createColors); +document.getElementById('sliderBrightness').addEventListener('input', createColors); +document.getElementById('sliderContrast').addEventListener('input', createColors); +document.getElementById('sliderSaturation').addEventListener('input', createColors); window.createColors = createColors; diff --git a/docs/ui/src/htmlHead.html b/docs/ui/src/htmlHead.html index 37e7a1a9..53a1fc99 100644 --- a/docs/ui/src/htmlHead.html +++ b/docs/ui/src/htmlHead.html @@ -1,17 +1,14 @@ - + @@ -19,95 +16,30 @@ Leonardo - - + + - + - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/docs/ui/src/index.js b/docs/ui/src/index.js index 06923424..232da146 100644 --- a/docs/ui/src/index.js +++ b/docs/ui/src/index.js @@ -10,123 +10,121 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import "@spectrum-css/vars/dist/spectrum-global.css"; -import "@spectrum-css/vars/dist/spectrum-medium.css"; -import "@spectrum-css/vars/dist/spectrum-light.css"; -import "@spectrum-css/vars/dist/spectrum-darkest.css"; +import '@spectrum-css/vars/dist/spectrum-global.css'; +import '@spectrum-css/vars/dist/spectrum-medium.css'; +import '@spectrum-css/vars/dist/spectrum-light.css'; +import '@spectrum-css/vars/dist/spectrum-darkest.css'; -import "@spectrum-css/page/dist/index-vars.css"; -import "@spectrum-css/icon/dist/index-vars.css"; -import "@spectrum-css/link/dist/index-vars.css"; -import "@spectrum-css/alert/dist/index-vars.css"; -import "@spectrum-css/radio/dist/index-vars.css"; -import "@spectrum-css/sidenav/dist/index-vars.css"; -import "@spectrum-css/dialog/dist/index-vars.css"; -import "@spectrum-css/actionbutton/dist/index-vars.css"; -import "@spectrum-css/button/dist/index-vars.css"; -import "@spectrum-css/badge/dist/index-vars.css"; -import "@spectrum-css/actionbutton/dist/index-vars.css"; -import "@spectrum-css/actiongroup/dist/index-vars.css"; -import "@spectrum-css/divider/dist/index-vars.css"; -import "@spectrum-css/fieldgroup/dist/index-vars.css"; -import "@spectrum-css/textfield/dist/index-vars.css"; -import "@spectrum-css/picker/dist/index-vars.css"; -import "@spectrum-css/fieldlabel/dist/index-vars.css"; -import "@spectrum-css/checkbox/dist/index-vars.css"; -import "@spectrum-css/switch/dist/index-vars.css"; -import "@spectrum-css/buttongroup/dist/index-vars.css"; -import "@spectrum-css/tooltip/dist/index-vars.css"; -import "@spectrum-css/slider/dist/index-vars.css"; -import "@spectrum-css/tabs/dist/index-vars.css"; -import "@spectrum-css/table/dist/index-vars.css"; -import "@spectrum-css/toast/dist/index-vars.css"; -import "@spectrum-css/illustratedmessage/dist/index-vars.css"; -import "@spectrum-css/typography/dist/index-vars.css"; -import "@spectrum-css/progresscircle/dist/index-vars.css"; +import '@spectrum-css/page/dist/index-vars.css'; +import '@spectrum-css/icon/dist/index-vars.css'; +import '@spectrum-css/link/dist/index-vars.css'; +import '@spectrum-css/alert/dist/index-vars.css'; +import '@spectrum-css/radio/dist/index-vars.css'; +import '@spectrum-css/sidenav/dist/index-vars.css'; +import '@spectrum-css/dialog/dist/index-vars.css'; +import '@spectrum-css/actionbutton/dist/index-vars.css'; +import '@spectrum-css/button/dist/index-vars.css'; +import '@spectrum-css/badge/dist/index-vars.css'; +import '@spectrum-css/actionbutton/dist/index-vars.css'; +import '@spectrum-css/actiongroup/dist/index-vars.css'; +import '@spectrum-css/divider/dist/index-vars.css'; +import '@spectrum-css/fieldgroup/dist/index-vars.css'; +import '@spectrum-css/textfield/dist/index-vars.css'; +import '@spectrum-css/picker/dist/index-vars.css'; +import '@spectrum-css/fieldlabel/dist/index-vars.css'; +import '@spectrum-css/checkbox/dist/index-vars.css'; +import '@spectrum-css/switch/dist/index-vars.css'; +import '@spectrum-css/buttongroup/dist/index-vars.css'; +import '@spectrum-css/tooltip/dist/index-vars.css'; +import '@spectrum-css/slider/dist/index-vars.css'; +import '@spectrum-css/tabs/dist/index-vars.css'; +import '@spectrum-css/table/dist/index-vars.css'; +import '@spectrum-css/toast/dist/index-vars.css'; +import '@spectrum-css/illustratedmessage/dist/index-vars.css'; +import '@spectrum-css/typography/dist/index-vars.css'; +import '@spectrum-css/progresscircle/dist/index-vars.css'; -import "./scss/style.scss"; -import "./scss/components/articleCard.scss"; -import "./scss/components/colorPicker.scss"; -import "./scss/components/colorSlider.scss"; -import "./scss/components/dialog.scss"; -import "./scss/components/header.scss"; -import "./scss/components/highlightCode.scss"; -import "./scss/components/imageUploader.scss"; -import "./scss/components/outputSwatches.scss"; -import "./scss/components/panelAccordion.scss"; -import "./scss/components/popover.scss"; -import "./scss/components/sections.scss"; -import "./scss/components/selectBox.scss"; -import "./scss/components/statusLabel.scss"; -import "./scss/components/textfield.scss"; -import "./scss/components/toast.scss"; -import "./scss/components/tooltip.scss"; +import './scss/style.scss'; +import './scss/components/articleCard.scss'; +import './scss/components/colorPicker.scss'; +import './scss/components/colorSlider.scss'; +import './scss/components/dialog.scss'; +import './scss/components/header.scss'; +import './scss/components/highlightCode.scss'; +import './scss/components/imageUploader.scss'; +import './scss/components/outputSwatches.scss'; +import './scss/components/panelAccordion.scss'; +import './scss/components/popover.scss'; +import './scss/components/sections.scss'; +import './scss/components/selectBox.scss'; +import './scss/components/statusLabel.scss'; +import './scss/components/textfield.scss'; +import './scss/components/toast.scss'; +import './scss/components/tooltip.scss'; -import "@adobe/focus-ring-polyfill"; -import { pageLoader } from "./js/pageLoader"; +import '@adobe/focus-ring-polyfill'; +import {pageLoader} from './js/pageLoader'; -import loadIcons from "loadicons"; -loadIcons("./spectrum-css-icons.svg"); -loadIcons("./spectrum-icons.svg"); +import loadIcons from 'loadicons'; +loadIcons('./spectrum-css-icons.svg'); +loadIcons('./spectrum-icons.svg'); // Import local Javascript functions -import { throttle } from "./js/utils"; -import { openPanelTab, openTab, openAppTab, openSideNavItem } from "./js/tabs"; -import toggleTooltip from "./js/tooltip"; +import {throttle} from './js/utils'; +import {openPanelTab, openTab, openAppTab, openSideNavItem} from './js/tabs'; +import toggleTooltip from './js/tooltip'; -const { readFileSync } = require("fs"); -const posthtml = require("posthtml"); +const {readFileSync} = require('fs'); +const posthtml = require('posthtml'); const options = { /* see available options below */ }; posthtml() - .use(require("posthtml-modules")(options)) - .process(readFileSync("src/index.html", "utf8")) + .use(require('posthtml-modules')(options)) + .process(readFileSync('src/index.html', 'utf8')) .then((result) => result); // Redirect for URL parameters let url = new URL(window.location); let params = new URLSearchParams(url.search.slice(1)); -if (params.has("colorKeys") || params.has("name")) { +if (params.has('colorKeys') || params.has('name')) { let newURL; // if URL includes "index", replace with "theme" - if (JSON.stringify(url.href).includes("index")) { - newURL = url.href.replace("index", "theme"); + if (JSON.stringify(url.href).includes('index')) { + newURL = url.href.replace('index', 'theme'); } // if URL is at root, such as leonardocolor.io/?params, redirect to "theme" else { - newURL = url.href.replace("/?", "/theme?"); + newURL = url.href.replace('/?', '/theme?'); } window.location.replace(newURL); } -window - .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", (event) => { - if (event.matches) { - //dark mode - document.querySelector("body").classList.remove("spectrum--light"); - document.querySelector("body").classList.add("spectrum--darkest"); - } else { - //light mode - document.querySelector("body").classList.add("spectrum--light"); - document.querySelector("body").classList.remove("spectrum--darkest"); - } - }); -const mq = window.matchMedia("(prefers-color-scheme: dark)"); +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { + if (event.matches) { + //dark mode + document.querySelector('body').classList.remove('spectrum--light'); + document.querySelector('body').classList.add('spectrum--darkest'); + } else { + //light mode + document.querySelector('body').classList.add('spectrum--light'); + document.querySelector('body').classList.remove('spectrum--darkest'); + } +}); +const mq = window.matchMedia('(prefers-color-scheme: dark)'); if (mq.matches) { //dark mode - document.querySelector("body").classList.add("spectrum--darkest"); + document.querySelector('body').classList.add('spectrum--darkest'); } else { //light mode - document.querySelector("body").classList.add("spectrum--light"); + document.querySelector('body').classList.add('spectrum--light'); } -document.getElementById("tabHome").click(); -document.getElementById("welcome").click(); +document.getElementById('tabHome').click(); +document.getElementById('welcome').click(); window.onload = function () { // On window load, transition to remove page loader diff --git a/docs/ui/src/js/addBulkDialog.js b/docs/ui/src/js/addBulkDialog.js index 2845d099..01276897 100644 --- a/docs/ui/src/js/addBulkDialog.js +++ b/docs/ui/src/js/addBulkDialog.js @@ -9,59 +9,49 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "./d3"; -import { addKeyColorInput } from "./keyColors"; -import { getColorClassById } from "./getThemeData"; -import { updateRamps } from "./ramps"; -import { updateColorDots } from "./colorWheel"; +import d3 from './d3'; +import {addKeyColorInput} from './keyColors'; +import {getColorClassById} from './getThemeData'; +import {updateRamps} from './ramps'; +import {updateColorDots} from './colorWheel'; function addBulk(e) { - let id = e.target.parentNode.parentNode.parentNode.id.replace( - "-themeColor_configs", - "", - ); + let id = e.target.parentNode.parentNode.parentNode.id.replace('-themeColor_configs', ''); - let button = document.getElementById("bulkAddButton"); - button.addEventListener("click", bulkItemColorInput); + let button = document.getElementById('bulkAddButton'); + button.addEventListener('click', bulkItemColorInput); - let dialog = document.getElementsByClassName("addBulkColorDialog"); + let dialog = document.getElementsByClassName('addBulkColorDialog'); for (let i = 0; i < dialog.length; i++) { let colorName = getColorClassById(id).name; - document.getElementById("addBulkDialog_ScaleName").innerHTML = colorName; - dialog[i].classList.add("is-open"); - dialog[i].id = id.concat("_dialog"); + document.getElementById('addBulkDialog_ScaleName').innerHTML = colorName; + dialog[i].classList.add('is-open'); + dialog[i].id = id.concat('_dialog'); } - document.getElementById("dialogOverlay").style.display = "block"; + document.getElementById('dialogOverlay').style.display = 'block'; } function cancelBulk() { - let dialog = document.getElementsByClassName("addBulkColorDialog"); + let dialog = document.getElementsByClassName('addBulkColorDialog'); for (let i = 0; i < dialog.length; i++) { - dialog[i].classList.remove("is-open"); - dialog[i].id = " "; + dialog[i].classList.remove('is-open'); + dialog[i].id = ' '; } - document.getElementById("dialogOverlay").style.display = "none"; + document.getElementById('dialogOverlay').style.display = 'none'; } function bulkItemColorInput(e) { let id = e.target.parentNode.parentNode.parentNode.id; - let itemId = id.replace("_dialog", ""); + let itemId = id.replace('_dialog', ''); const currentColor = getColorClassById(itemId); const currentColorName = currentColor.name; const currentKeys = currentColor.colorKeys; - let bulkInputs = document.getElementById("bulkColors"); - let bulkValues = bulkInputs.value - .replace(/\r\n/g, "\n") - .replace(/[,\/]/g, "\n") - .replace(" ", "") - .replace(/['\/]/g, "") - .replace(/["\/]/g, "") - .replace(" ", "") - .split("\n"); + let bulkInputs = document.getElementById('bulkColors'); + let bulkValues = bulkInputs.value.replace(/\r\n/g, '\n').replace(/[,\/]/g, '\n').replace(' ', '').replace(/['\/]/g, '').replace(/["\/]/g, '').replace(' ', '').split('\n'); for (let i = 0; i < bulkValues.length; i++) { - if (!bulkValues[i].startsWith("#")) { - bulkValues[i] = "#" + bulkValues[i]; + if (!bulkValues[i].startsWith('#')) { + bulkValues[i] = '#' + bulkValues[i]; } } @@ -73,11 +63,11 @@ function bulkItemColorInput(e) { newKeys.push(colorVal); } - _theme.updateColor = { color: currentColorName, colorKeys: newKeys }; + _theme.updateColor = {color: currentColorName, colorKeys: newKeys}; // Update gradient updateRamps(currentColor, itemId); - updateColorDots(null, "theme"); + updateColorDots(null, 'theme'); // Hide dialog cancelBulk(); @@ -85,7 +75,7 @@ function bulkItemColorInput(e) { themeUpdateParams(); // clear inputs on close - bulkInputs.value = " "; + bulkInputs.value = ' '; } window.addBulk = addBulk; @@ -95,5 +85,5 @@ window.bulkItemColorInput = bulkItemColorInput; module.exports = { addBulk, bulkItemColorInput, - cancelBulk, + cancelBulk }; diff --git a/docs/ui/src/js/addColorsFromImage.js b/docs/ui/src/js/addColorsFromImage.js index 4bfe4fe4..36652789 100644 --- a/docs/ui/src/js/addColorsFromImage.js +++ b/docs/ui/src/js/addColorsFromImage.js @@ -9,65 +9,62 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import { _theme } from "./initialTheme"; -import { themeUpdateParams } from "./themeUpdate"; -import { addColorScale } from "./colorScale"; -import { getContrastRatioInputs, getAllColorNames } from "./getThemeData"; -import { - getClosestColorName, - getRandomColorName, -} from "./predefinedColorNames"; -import { groupCommonHues, removeElementsByClass } from "./utils"; -import { prominent, average } from "color.js"; +import * as Leo from '@adobe/leonardo-contrast-colors'; +import {_theme} from './initialTheme'; +import {themeUpdateParams} from './themeUpdate'; +import {addColorScale} from './colorScale'; +import {getContrastRatioInputs, getAllColorNames} from './getThemeData'; +import {getClosestColorName, getRandomColorName} from './predefinedColorNames'; +import {groupCommonHues, removeElementsByClass} from './utils'; +import {prominent, average} from 'color.js'; function addColorsFromImage() { const imageColorAmmount = 18; // 25 const imageColorGrouping = 100; // 30 - const input = document.getElementById("image-upload"); + const input = document.getElementById('image-upload'); const ratios = getContrastRatioInputs(); - const preview = document.getElementById("image-preview"); + const preview = document.getElementById('image-preview'); while (preview.firstChild) { preview.removeChild(preview.firstChild); } const curFiles = input.files; if (curFiles.length === 0) { - const para = document.createElement("p"); + const para = document.createElement('p'); } else { for (const file of curFiles) { - const para = document.createElement("p"); - para.className = "spectrum-Body image-preview_text"; + const para = document.createElement('p'); + para.className = 'spectrum-Body image-preview_text'; if (validFileType(file)) { para.textContent = `Color scales extracted from ${file.name}.`; - const image = document.createElement("img"); + const image = document.createElement('img'); const fileUrl = URL.createObjectURL(file); image.src = fileUrl; preview.appendChild(image); average(fileUrl) .then((color) => { - removeElementsByClass("themeColor_item"); + removeElementsByClass('themeColor_item'); const existingColorNames = getAllColorNames(); - color = chroma(color[0], color[1], color[2], "rgb"); + color = chroma(color[0], color[1], color[2], 'rgb'); let colorName; let closest = getClosestColorName(color); let duplicateName = existingColorNames.includes(closest); if (closest && !duplicateName) colorName = closest; - if (!colorName) colorName = "Gray"; + if (!colorName) colorName = 'Gray'; // Remove gray and replace with new average color as the base - _theme.removeColor = { name: "Gray" }; + _theme.removeColor = {name: 'Gray'}; let newColor = new Leo.BackgroundColor({ name: colorName, colorKeys: [color.hex()], - colorspace: "CAM02p", + colorspace: 'CAM02p', ratios: ratios, - smooth: true, + smooth: true }); addColorScale(newColor, true); @@ -76,8 +73,8 @@ function addColorsFromImage() { .then(() => { prominent(fileUrl, { amount: imageColorAmmount, - format: "hex", - group: imageColorGrouping, + format: 'hex', + group: imageColorGrouping }).then((colors) => { // First we grab a large group of colors from Prominant/color.js // then, we need to call our own utility function to group @@ -99,9 +96,9 @@ function addColorsFromImage() { let newColor = new Leo.BackgroundColor({ name: colorName, colorKeys: color, - colorspace: "CAM02p", + colorspace: 'CAM02p', ratios: ratios, - smooth: true, + smooth: true }); addColorScale(newColor, true); }); @@ -122,18 +119,7 @@ function addColorsFromImage() { } // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types -const fileTypes = [ - "image/apng", - "image/bmp", - "image/gif", - "image/jpeg", - "image/pjpeg", - "image/png", - "image/svg+xml", - "image/tiff", - "image/webp", - `image/x-icon`, -]; +const fileTypes = ['image/apng', 'image/bmp', 'image/gif', 'image/jpeg', 'image/pjpeg', 'image/png', 'image/svg+xml', 'image/tiff', 'image/webp', `image/x-icon`]; function validFileType(file) { return fileTypes.includes(file.type); @@ -142,5 +128,5 @@ function validFileType(file) { window.addColorsFromImage = addColorsFromImage; module.exports = { - addColorsFromImage, + addColorsFromImage }; diff --git a/docs/ui/src/js/addFromURL.js b/docs/ui/src/js/addFromURL.js index bb4e950f..a03d04b7 100644 --- a/docs/ui/src/js/addFromURL.js +++ b/docs/ui/src/js/addFromURL.js @@ -9,27 +9,27 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { addColorScaleUpdate } from "./colorScale"; +import {addColorScaleUpdate} from './colorScale'; function addFromURLDialog() { - let button = document.getElementById("addFromURLButton"); - button.addEventListener("click", addFromURL); + let button = document.getElementById('addFromURLButton'); + button.addEventListener('click', addFromURL); - let dialog = document.getElementById("addFromURLDialog"); - dialog.classList.add("is-open"); + let dialog = document.getElementById('addFromURLDialog'); + dialog.classList.add('is-open'); - document.getElementById("dialogOverlay").style.display = "block"; + document.getElementById('dialogOverlay').style.display = 'block'; } function cancelURL() { - let dialog = document.getElementById("addFromURLDialog"); - dialog.classList.remove("is-open"); + let dialog = document.getElementById('addFromURLDialog'); + dialog.classList.remove('is-open'); - document.getElementById("dialogOverlay").style.display = "none"; + document.getElementById('dialogOverlay').style.display = 'none'; } function addFromURL() { - let input = document.getElementById("addFromURLinput"); + let input = document.getElementById('addFromURLinput'); let value = input.value; let url = new URL(value); @@ -37,21 +37,18 @@ function addFromURL() { let pathName = url.pathname; let crs, ratios, mode; - let cName = - predefinedColorNames[ - Math.floor(Math.random() * predefinedColorNames.length) - ]; + let cName = predefinedColorNames[Math.floor(Math.random() * predefinedColorNames.length)]; // // If parameters exist, use parameter; else use default html input values - if (params.has("colorKeys")) { - let cr = params.get("colorKeys"); - crs = cr.split(","); + if (params.has('colorKeys')) { + let cr = params.get('colorKeys'); + crs = cr.split(','); } - if (params.has("ratios")) { + if (params.has('ratios')) { // transform parameter values into array of numbers - let rat = params.get("ratios"); - ratios = rat.split(","); + let rat = params.get('ratios'); + ratios = rat.split(','); ratios = ratios.map(Number); if (ratios[0] == 0) { @@ -60,8 +57,8 @@ function addFromURL() { } else { } } - if (params.has("mode")) { - mode = params.get("mode"); + if (params.has('mode')) { + mode = params.get('mode'); } else { // do nothing } @@ -71,7 +68,7 @@ function addFromURL() { // Run colorinput // throttle(themeUpdate, 10); // Clear out value when done - input.value = " "; + input.value = ' '; } window.addFromURLDialog = addFromURLDialog; @@ -81,5 +78,5 @@ window.addFromURL = addFromURL; module.exports = { addFromURL, addFromURLDialog, - cancelURL, + cancelURL }; diff --git a/docs/ui/src/js/addLightnessBulkDialog.js b/docs/ui/src/js/addLightnessBulkDialog.js index a26f43b1..3f762b28 100644 --- a/docs/ui/src/js/addLightnessBulkDialog.js +++ b/docs/ui/src/js/addLightnessBulkDialog.js @@ -9,47 +9,36 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "./d3"; -import * as Leo from "@adobe/leonardo-contrast-colors"; +import d3 from './d3'; +import * as Leo from '@adobe/leonardo-contrast-colors'; -import { addRatioInputs, sortRatios } from "./ratios"; -import { round } from "./utils"; +import {addRatioInputs, sortRatios} from './ratios'; +import {round} from './utils'; function addLightnessBulk(e) { - let dialog = document.getElementById("addBulkLightnessDialog"); - dialog.classList.add("is-open"); + let dialog = document.getElementById('addBulkLightnessDialog'); + dialog.classList.add('is-open'); - document.getElementById("dialogOverlay").style.display = "block"; + document.getElementById('dialogOverlay').style.display = 'block'; } function cancelLightnessBulk() { - let dialog = document.getElementById("addBulkLightnessDialog"); - dialog.classList.remove("is-open"); + let dialog = document.getElementById('addBulkLightnessDialog'); + dialog.classList.remove('is-open'); - document.getElementById("dialogOverlay").style.display = "none"; + document.getElementById('dialogOverlay').style.display = 'none'; } function bulkLightnessInput(e) { - let bulkInputs = document.getElementById("bulkLightnessColors"); - let bulkValues = bulkInputs.value - .replace(/\r\n/g, "\n") - .replace(/[,\/]/g, "\n") - .replace(" ", "") - .replace(/['\/]/g, "") - .replace(/["\/]/g, "") - .replace(" ", "") - .split("\n"); + let bulkInputs = document.getElementById('bulkLightnessColors'); + let bulkValues = bulkInputs.value.replace(/\r\n/g, '\n').replace(/[,\/]/g, '\n').replace(' ', '').replace(/['\/]/g, '').replace(/["\/]/g, '').replace(' ', '').split('\n'); for (let i = 0; i < bulkValues.length; i++) { - if (!bulkValues[i].startsWith("#")) { - bulkValues[i] = "#" + bulkValues[i]; + if (!bulkValues[i].startsWith('#')) { + bulkValues[i] = '#' + bulkValues[i]; } } - let themeBackgroundColorArray = [ - d3.rgb(_theme.backgroundColorValue).r, - d3.rgb(_theme.backgroundColorValue).g, - d3.rgb(_theme.backgroundColorValue).b, - ]; + let themeBackgroundColorArray = [d3.rgb(_theme.backgroundColorValue).r, d3.rgb(_theme.backgroundColorValue).g, d3.rgb(_theme.backgroundColorValue).b]; let contrasts = bulkValues.map((value) => { let colorArray = [d3.rgb(value).r, d3.rgb(value).g, d3.rgb(value).b]; @@ -65,7 +54,7 @@ function bulkLightnessInput(e) { themeUpdateParams(); // clear inputs on close - bulkInputs.value = " "; + bulkInputs.value = ' '; } window.addLightnessBulk = addLightnessBulk; @@ -75,5 +64,5 @@ window.bulkLightnessInput = bulkLightnessInput; module.exports = { addLightnessBulk, bulkLightnessInput, - cancelLightnessBulk, + cancelLightnessBulk }; diff --git a/docs/ui/src/js/addScaleBulkDialog.js b/docs/ui/src/js/addScaleBulkDialog.js index 0520235d..cb59f436 100644 --- a/docs/ui/src/js/addScaleBulkDialog.js +++ b/docs/ui/src/js/addScaleBulkDialog.js @@ -9,71 +9,59 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "./d3"; -import { _sequentialScale } from "./initialSequentialScale"; -import { _divergingScale } from "./initialDivergingScale"; -import { addScaleKeyColorInput } from "./scaleKeyColors"; -import { updateRamps } from "./ramps"; -import { create3dModel } from "./create3dModel"; -import { createSamples } from "./createSamples"; -import { createDemos } from "./createDemos"; -import { createPanelReportTable } from "./createPanelReportTable"; +import d3 from './d3'; +import {_sequentialScale} from './initialSequentialScale'; +import {_divergingScale} from './initialDivergingScale'; +import {addScaleKeyColorInput} from './scaleKeyColors'; +import {updateRamps} from './ramps'; +import {create3dModel} from './create3dModel'; +import {createSamples} from './createSamples'; +import {createDemos} from './createDemos'; +import {createPanelReportTable} from './createPanelReportTable'; function addScaleBulk(e) { // id is scaleType - let id = e.target.id.replace("_addBulk", ""); + let id = e.target.id.replace('_addBulk', ''); // console.log(id) - let colorNameInputId = id.concat("_name"); + let colorNameInputId = id.concat('_name'); let colorNameInput = document.getElementById(colorNameInputId); let colorName = colorNameInput.value; - let button = document.getElementById("bulkAddButton"); - button.addEventListener("click", bulkScaleItemColorInput); + let button = document.getElementById('bulkAddButton'); + button.addEventListener('click', bulkScaleItemColorInput); - let dialog = document.getElementsByClassName("addBulkColorDialog"); + let dialog = document.getElementsByClassName('addBulkColorDialog'); for (let i = 0; i < dialog.length; i++) { - document.getElementById("addBulkDialog_ScaleName").innerHTML = colorName; - dialog[i].classList.add("is-open"); - dialog[i].id = id.concat("_dialog"); + document.getElementById('addBulkDialog_ScaleName').innerHTML = colorName; + dialog[i].classList.add('is-open'); + dialog[i].id = id.concat('_dialog'); } - document.getElementById("dialogOverlay").style.display = "block"; + document.getElementById('dialogOverlay').style.display = 'block'; } function cancelScaleBulk() { - let dialog = document.getElementsByClassName("addBulkColorDialog"); + let dialog = document.getElementsByClassName('addBulkColorDialog'); for (let i = 0; i < dialog.length; i++) { - dialog[i].classList.remove("is-open"); - dialog[i].id = " "; + dialog[i].classList.remove('is-open'); + dialog[i].id = ' '; } - document.getElementById("dialogOverlay").style.display = "none"; + document.getElementById('dialogOverlay').style.display = 'none'; } function bulkScaleItemColorInput(e) { let id = e.target.parentNode.parentNode.parentNode.id; - let itemId = id.replace("_dialog", ""); + let itemId = id.replace('_dialog', ''); // console.log(itemId) - const currentColor = - itemId === "sequential" - ? _sequentialScale - : itemId === "divergingScale" - ? _divergingScale - : _qualitativeScale; + const currentColor = itemId === 'sequential' ? _sequentialScale : itemId === 'divergingScale' ? _divergingScale : _qualitativeScale; const currentKeys = currentColor.colorKeys; - let bulkInputs = document.getElementById("bulkColors"); - let bulkValues = bulkInputs.value - .replace(/\r\n/g, "\n") - .replace(/[,\/]/g, "\n") - .replace(" ", "") - .replace(/['\/]/g, "") - .replace(/["\/]/g, "") - .replace(" ", "") - .split("\n"); + let bulkInputs = document.getElementById('bulkColors'); + let bulkValues = bulkInputs.value.replace(/\r\n/g, '\n').replace(/[,\/]/g, '\n').replace(' ', '').replace(/['\/]/g, '').replace(/["\/]/g, '').replace(' ', '').split('\n'); for (let i = 0; i < bulkValues.length; i++) { - if (!bulkValues[i].startsWith("#")) { - bulkValues[i] = "#" + bulkValues[i]; + if (!bulkValues[i].startsWith('#')) { + bulkValues[i] = '#' + bulkValues[i]; } } @@ -93,17 +81,14 @@ function bulkScaleItemColorInput(e) { // Update gradient let scaleType = itemId; const colorClass = currentColor; - let chartsModeId = - scaleType === "sequential" - ? "sequential_chartsMode" - : "diverging_chartsMode"; + let chartsModeId = scaleType === 'sequential' ? 'sequential_chartsMode' : 'diverging_chartsMode'; const chartsModeSelect = document.getElementById(chartsModeId); let PlotDestId = `${scaleType}ModelWrapper`; let sampleInputId = `${scaleType}Samples`; const sampleNumber = document.getElementById(sampleInputId).value; let bgInput = document.getElementById(`scales_bgColor`); let bg = bgInput.value; - let levelSelect = document.getElementById("scales_complianceLevel"); + let levelSelect = document.getElementById('scales_complianceLevel'); let level = levelSelect.value; let colors = colorClass.samples; // samples are the ouptut, colors are the full scale const color2 = colors[0]; @@ -119,7 +104,7 @@ function bulkScaleItemColorInput(e) { cancelScaleBulk(); // clear inputs on close - bulkInputs.value = " "; + bulkInputs.value = ' '; } window.addScaleBulk = addScaleBulk; @@ -129,5 +114,5 @@ window.bulkScaleItemColorInput = bulkScaleItemColorInput; module.exports = { addScaleBulk, bulkScaleItemColorInput, - cancelScaleBulk, + cancelScaleBulk }; diff --git a/docs/ui/src/js/bulkConvertDialog.js b/docs/ui/src/js/bulkConvertDialog.js index fdd032dc..09157bd2 100644 --- a/docs/ui/src/js/bulkConvertDialog.js +++ b/docs/ui/src/js/bulkConvertDialog.js @@ -9,59 +9,51 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { APCAcontrast, sRGBtoY } from "apca-w3"; -import { round } from "./utils"; -import { contrast } from "@adobe/leonardo-contrast-colors"; -import { saveAs } from "file-saver"; +import {APCAcontrast, sRGBtoY} from 'apca-w3'; +import {round} from './utils'; +import {contrast} from '@adobe/leonardo-contrast-colors'; +import {saveAs} from 'file-saver'; -const simpleColorConverter = require("simple-color-converter"); +const simpleColorConverter = require('simple-color-converter'); -const chroma = require("chroma-js"); -const { extendChroma } = require("./chroma-plus"); +const chroma = require('chroma-js'); +const {extendChroma} = require('./chroma-plus'); extendChroma(chroma); function bulkConvert(e) { - let button = document.getElementById("bulkConvert"); - button.addEventListener("click", bulkItemConvertColorInput); + let button = document.getElementById('bulkConvert'); + button.addEventListener('click', bulkItemConvertColorInput); - let dialog = document.getElementById("bulkConvertDialog"); - dialog.classList.add("is-open"); + let dialog = document.getElementById('bulkConvertDialog'); + dialog.classList.add('is-open'); - document.getElementById("dialogOverlay").style.display = "block"; + document.getElementById('dialogOverlay').style.display = 'block'; } function cancelBulkConvert() { - let dialog = document.getElementById("bulkConvertDialog"); - dialog.classList.remove("is-open"); - document.getElementById("dialogOverlay").style.display = "none"; + let dialog = document.getElementById('bulkConvertDialog'); + dialog.classList.remove('is-open'); + document.getElementById('dialogOverlay').style.display = 'none'; } function bulkItemConvertColorInput(e) { - let background = document.getElementById("bulkConvertBackground").value; - let bulkInputs = document.getElementById("bulkConvertColors"); - let bulkValues = bulkInputs.value - .replace(/\r\n/g, "\n") - .replace(/[,\/]/g, "\n") - .replace(" ", "") - .replace(/['\/]/g, "") - .replace(/["\/]/g, "") - .replace(" ", "") - .split("\n"); + let background = document.getElementById('bulkConvertBackground').value; + let bulkInputs = document.getElementById('bulkConvertColors'); + let bulkValues = bulkInputs.value.replace(/\r\n/g, '\n').replace(/[,\/]/g, '\n').replace(' ', '').replace(/['\/]/g, '').replace(/["\/]/g, '').replace(' ', '').split('\n'); bulkValues = bulkValues.map((value) => { - return value.replace(" ", ""); + return value.replace(' ', ''); }); for (let i = 0; i < bulkValues.length; i++) { // console.log(bulkValues[i]) - if (!bulkValues[i].startsWith("#")) { - bulkValues[i] = "#" + bulkValues[i]; + if (!bulkValues[i].startsWith('#')) { + bulkValues[i] = '#' + bulkValues[i]; } } - let opts = ["HEX"]; // By default, always include hex - let checkboxes = document.getElementsByClassName("convertBulkColorspace"); + let opts = ['HEX']; // By default, always include hex + let checkboxes = document.getElementsByClassName('convertBulkColorspace'); for (let i = 0; i < checkboxes.length; i++) { - if (checkboxes[i].checked) - opts.push(checkboxes[i].id.replace("checkboxConvert-", "")); + if (checkboxes[i].checked) opts.push(checkboxes[i].id.replace('checkboxConvert-', '')); } let colors = []; @@ -77,16 +69,12 @@ function bulkItemConvertColorInput(e) { data.push(createColorJson(c, opts, background)); }); - const replacer = (key, value) => (value === null ? "" : value); // specify how you want to handle null values here + const replacer = (key, value) => (value === null ? '' : value); // specify how you want to handle null values here const header = Object.keys(data[0]); const csv = [ - header.join(","), // header row first - ...data.map((row) => - header - .map((fieldName) => JSON.stringify(row[fieldName], replacer)) - .join(","), - ), - ].join("\r\n"); + header.join(','), // header row first + ...data.map((row) => header.map((fieldName) => JSON.stringify(row[fieldName], replacer)).join(',')) + ].join('\r\n'); // console.log(csv) @@ -94,14 +82,14 @@ function bulkItemConvertColorInput(e) { csvData.then((file) => { let filename = `converted_colors.csv`; - var blob = new Blob([`${file}`], { type: "text/plain" }); + var blob = new Blob([`${file}`], {type: 'text/plain'}); saveAs(blob, filename); }); cancelBulkConvert(); - bulkInputs.value = " "; + bulkInputs.value = ' '; } function createColorJson(value, colorSpaces, background) { @@ -116,89 +104,66 @@ function createColorJson(value, colorSpaces, background) { for (let i = 0; i < colorSpaces.length; i++) { let colorChannels, colorChannelLabels; - if (colorSpaces[i] === "HEX") colorChannels = color.hex(); - if (colorSpaces[i] === "RGB") colorChannels = color.rgb(); - if (colorSpaces[i] === "HSL") + if (colorSpaces[i] === 'HEX') colorChannels = color.hex(); + if (colorSpaces[i] === 'RGB') colorChannels = color.rgb(); + if (colorSpaces[i] === 'HSL') colorChannels = color.hsl().map((c, i) => { if (i > 0) return c * 100; else return c; }); // all channels except hue are percentages - if (colorSpaces[i] === "HSV") + if (colorSpaces[i] === 'HSV') colorChannels = color.hsv().map((c, i) => { if (i > 0) return c * 100; else return c; }); // all channels except hue are percentages - if (colorSpaces[i] === "LAB") colorChannels = color.lab(); - if (colorSpaces[i] === "LCH") colorChannels = color.lch(); - if (colorSpaces[i] === "OKLAB") colorChannels = color.oklab(); - if (colorSpaces[i] === "OKLCH") colorChannels = color.oklch(); - if (colorSpaces[i] === "HSLuv") colorChannels = color.hsluv(); - if (colorSpaces[i] === "CAM02") colorChannels = color.jab(); - if (colorSpaces[i] === "CAM02p") colorChannels = color.jch(); - if (colorSpaces[i] === "CMYK") + if (colorSpaces[i] === 'LAB') colorChannels = color.lab(); + if (colorSpaces[i] === 'LCH') colorChannels = color.lch(); + if (colorSpaces[i] === 'OKLAB') colorChannels = color.oklab(); + if (colorSpaces[i] === 'OKLCH') colorChannels = color.oklch(); + if (colorSpaces[i] === 'HSLuv') colorChannels = color.hsluv(); + if (colorSpaces[i] === 'CAM02') colorChannels = color.jab(); + if (colorSpaces[i] === 'CAM02p') colorChannels = color.jch(); + if (colorSpaces[i] === 'CMYK') colorChannels = color.cmyk().map((c) => { return c * 100; }); - if (colorSpaces[i] === "XYZ") + if (colorSpaces[i] === 'XYZ') colorChannels = Object.values( new simpleColorConverter({ - rgb: { r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2] }, - to: "xyz", - }).color, + rgb: {r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2]}, + to: 'xyz' + }).color ); - if (colorSpaces[i] === "Pantone") + if (colorSpaces[i] === 'Pantone') colorChannels = new simpleColorConverter({ - rgb: { r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2] }, - to: "pantone", + rgb: {r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2]}, + to: 'pantone' }).color; - if (colorSpaces[i] === "wcag2") - colorChannels = round( - contrast(color.rgb(), chroma(background).rgb(), "wcag2"), - 2, - ); - if (colorSpaces[i] === "wcag3") { + if (colorSpaces[i] === 'wcag2') colorChannels = round(contrast(color.rgb(), chroma(background).rgb(), 'wcag2'), 2); + if (colorSpaces[i] === 'wcag3') { const baseLightness = chroma(background).hsluv()[2]; const baseV = round(baseLightness / 100, 2); let base = chroma(background).rgb(); - colorChannels = round( - baseV < 0.5 - ? APCAcontrast(sRGBtoY(color.rgb()), sRGBtoY(base)) * -1 - : APCAcontrast(sRGBtoY(color.rgb()), sRGBtoY(base)), - 2, - ); + colorChannels = round(baseV < 0.5 ? APCAcontrast(sRGBtoY(color.rgb()), sRGBtoY(base)) * -1 : APCAcontrast(sRGBtoY(color.rgb()), sRGBtoY(base)), 2); } - if (colorSpaces[i] === "HEX") colorChannelLabels = ["Hex"]; - if (colorSpaces[i] === "RGB") - colorChannelLabels = ["rgb (R)", "rgb (G)", "rgb (B)"]; - if (colorSpaces[i] === "HSL") - colorChannelLabels = ["hsl (H)", "hsl (S)", "hsl (L)"]; - if (colorSpaces[i] === "HSV") - colorChannelLabels = ["hsv (H)", "hsv (S)", "hsv (V)"]; - if (colorSpaces[i] === "LAB") - colorChannelLabels = ["LAB (L)", "LAB (A)", "LAB (B)"]; - if (colorSpaces[i] === "LCH") - colorChannelLabels = ["LCh (L)", "LCh (C)", "LCh (H)"]; - if (colorSpaces[i] === "OKLAB") - colorChannelLabels = ["OKLAB (L)", "OKLAB (A)", "OKLAB (B)"]; - if (colorSpaces[i] === "OKLCH") - colorChannelLabels = ["OKLCH (L)", "OKLCh (C)", "OKLCh (H)"]; - if (colorSpaces[i] === "HSLuv") - colorChannelLabels = ["HSLuv (L)", "HSLuv (U)", "HSLuv (V)"]; - if (colorSpaces[i] === "CAM02") - colorChannelLabels = ["CAM02 (L)", "CAM02 (A)", "CAM02 (B)"]; - if (colorSpaces[i] === "CAM02p") - colorChannelLabels = ["CAM02 (L)", "CAM02 (C)", "CAM02 (H)"]; - if (colorSpaces[i] === "CMYK") - colorChannelLabels = ["cmyk (C)", "cmyk (M)", "cmyk (Y)", "cmyk (K)"]; - if (colorSpaces[i] === "XYZ") - colorChannelLabels = ["xyz (X)", "xyz (Y)", "xyz (Z)"]; - if (colorSpaces[i] === "Pantone") colorChannelLabels = ["Pantone"]; - - if (colorSpaces[i] === "wcag2") - colorChannelLabels = [`Rel Lum vs ${background}`]; - if (colorSpaces[i] === "wcag3") - colorChannelLabels = [`APCA vs ${background}`]; + if (colorSpaces[i] === 'HEX') colorChannelLabels = ['Hex']; + if (colorSpaces[i] === 'RGB') colorChannelLabels = ['rgb (R)', 'rgb (G)', 'rgb (B)']; + if (colorSpaces[i] === 'HSL') colorChannelLabels = ['hsl (H)', 'hsl (S)', 'hsl (L)']; + if (colorSpaces[i] === 'HSV') colorChannelLabels = ['hsv (H)', 'hsv (S)', 'hsv (V)']; + if (colorSpaces[i] === 'LAB') colorChannelLabels = ['LAB (L)', 'LAB (A)', 'LAB (B)']; + if (colorSpaces[i] === 'LCH') colorChannelLabels = ['LCh (L)', 'LCh (C)', 'LCh (H)']; + if (colorSpaces[i] === 'OKLAB') colorChannelLabels = ['OKLAB (L)', 'OKLAB (A)', 'OKLAB (B)']; + if (colorSpaces[i] === 'OKLCH') colorChannelLabels = ['OKLCH (L)', 'OKLCh (C)', 'OKLCh (H)']; + if (colorSpaces[i] === 'HSLuv') colorChannelLabels = ['HSLuv (L)', 'HSLuv (U)', 'HSLuv (V)']; + if (colorSpaces[i] === 'CAM02') colorChannelLabels = ['CAM02 (L)', 'CAM02 (A)', 'CAM02 (B)']; + if (colorSpaces[i] === 'CAM02p') colorChannelLabels = ['CAM02 (L)', 'CAM02 (C)', 'CAM02 (H)']; + if (colorSpaces[i] === 'CMYK') colorChannelLabels = ['cmyk (C)', 'cmyk (M)', 'cmyk (Y)', 'cmyk (K)']; + if (colorSpaces[i] === 'XYZ') colorChannelLabels = ['xyz (X)', 'xyz (Y)', 'xyz (Z)']; + if (colorSpaces[i] === 'Pantone') colorChannelLabels = ['Pantone']; + + if (colorSpaces[i] === 'wcag2') colorChannelLabels = [`Rel Lum vs ${background}`]; + if (colorSpaces[i] === 'wcag3') colorChannelLabels = [`APCA vs ${background}`]; if (Array.isArray(colorChannels)) { colorChannels = colorChannels.map((c) => { @@ -223,5 +188,5 @@ window.bulkItemConvertColorInput = bulkItemConvertColorInput; module.exports = { bulkConvert, bulkItemConvertColorInput, - cancelBulkConvert, + cancelBulkConvert }; diff --git a/docs/ui/src/js/chroma-plus.js b/docs/ui/src/js/chroma-plus.js index f6faea30..483d0983 100644 --- a/docs/ui/src/js/chroma-plus.js +++ b/docs/ui/src/js/chroma-plus.js @@ -10,37 +10,34 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -const chromajs = require("chroma-js"); -const hsluv = require("hsluv"); -const ciebase = require("ciebase"); -const ciecam02 = require("ciecam02"); +const chromajs = require('chroma-js'); +const hsluv = require('hsluv'); +const ciebase = require('ciebase'); +const ciecam02 = require('ciecam02'); const cam = ciecam02.cam( { whitePoint: ciebase.illuminant.D65, adaptingLuminance: 40, backgroundLuminance: 20, - surroundType: "average", - discounting: false, + surroundType: 'average', + discounting: false }, - ciecam02.cfs("JCh"), + ciecam02.cfs('JCh') ); const xyz = ciebase.xyz(ciebase.workspace.sRGB, ciebase.illuminant.D65); -const jch2rgb = (jch) => - xyz.toRgb(cam.toXyz({ J: jch[0], C: jch[1], h: jch[2] })); +const jch2rgb = (jch) => xyz.toRgb(cam.toXyz({J: jch[0], C: jch[1], h: jch[2]})); const rgb2jch = (rgb) => { const jch = cam.fromXyz(xyz.fromRgb(rgb)); return [jch.J, jch.C, jch.h]; }; const [jch2jab, jab2jch] = (() => { - const coefs = { k_l: 1, c1: 0.007, c2: 0.0228 }; + const coefs = {k_l: 1, c1: 0.007, c2: 0.0228}; const π = Math.PI; const CIECAM02_la = 64 / π / 5; const CIECAM02_k = 1 / (5 * CIECAM02_la + 1); - const CIECAM02_fl = - 0.2 * CIECAM02_k ** 4 * (5 * CIECAM02_la) + - 0.1 * (1 - CIECAM02_k ** 4) ** 2 * (5 * CIECAM02_la) ** (1 / 3); + const CIECAM02_fl = 0.2 * CIECAM02_k ** 4 * (5 * CIECAM02_la) + 0.1 * (1 - CIECAM02_k ** 4) ** 2 * (5 * CIECAM02_la) ** (1 / 3); return [ (jch) => { const [J, C, h] = jch; @@ -60,7 +57,7 @@ const [jch2jab, jab2jch] = (() => { const C = newM / CIECAM02_fl ** 0.25; const J = j / (1 + coefs.c1 * (100 - j)); return [J, C, h]; - }, + } ]; })(); @@ -71,28 +68,17 @@ const con = console; // Usage: // console.color('rebeccapurple'); -con.color = (color, text = "") => { +con.color = (color, text = '') => { const col = chromajs(color); const l = col.luminance(); - con.log( - `%c${color} ${text}`, - `background-color: ${color};padding: 5px; border-radius: 5px; color: ${ - l > 0.5 ? "#000" : "#fff" - }`, - ); + con.log(`%c${color} ${text}`, `background-color: ${color};padding: 5px; border-radius: 5px; color: ${l > 0.5 ? '#000' : '#fff'}`); }; // Usage: // console.ramp(chroma.scale(['yellow', 'navy']).mode('hsluv')); // console.ramp(scale, 3000); // if you need to specify the length of the scale con.ramp = (scale, length = 1) => { - con.log( - "%c ", - `font-size: 1px;line-height: 16px;background: ${chromajs.getCSSGradient( - scale, - length, - )};padding: 0 0 0 200px; border-radius: 2px;`, - ); + con.log('%c ', `font-size: 1px;line-height: 16px;background: ${chromajs.getCSSGradient(scale, length)};padding: 0 0 0 200px; border-radius: 2px;`); }; const online = (x1, y1, x2, y2, x3, y3, ε = 0.1) => { @@ -143,18 +129,8 @@ const getCSSGradient = (scale, length = 1, deg = 90, ε = 0.005) => { const ptsr = split((x) => scale(x).gl()[0], 0, length, ε); const ptsg = split((x) => scale(x).gl()[1], 0, length, ε); const ptsb = split((x) => scale(x).gl()[2], 0, length, ε); - const points = Array.from( - new Set( - [ - ...ptsr.map((a) => round(a[0])), - ...ptsg.map((a) => round(a[0])), - ...ptsb.map((a) => round(a[0])), - ].sort((a, b) => a - b), - ), - ); - return `linear-gradient(${deg}deg, ${points - .map((x) => `${scale(x).hex()} ${round(x * 100)}%`) - .join()});`; + const points = Array.from(new Set([...ptsr.map((a) => round(a[0])), ...ptsg.map((a) => round(a[0])), ...ptsb.map((a) => round(a[0]))].sort((a, b) => a - b))); + return `linear-gradient(${deg}deg, ${points.map((x) => `${scale(x).hex()} ${round(x * 100)}%`).join()});`; }; exports.extendChroma = (chroma) => { @@ -163,33 +139,27 @@ exports.extendChroma = (chroma) => { return rgb2jch(this._rgb.slice(0, 3).map((c) => c / 255)); }; - chroma.jch = (...args) => - new chroma.Color(...jch2rgb(args).map((c) => Math.floor(c * 255)), "rgb"); + chroma.jch = (...args) => new chroma.Color(...jch2rgb(args).map((c) => Math.floor(c * 255)), 'rgb'); // JAB chroma.Color.prototype.jab = function () { return rgb2jab(this._rgb.slice(0, 3).map((c) => c / 255)); }; - chroma.jab = (...args) => - new chroma.Color(...jab2rgb(args).map((c) => Math.floor(c * 255)), "rgb"); + chroma.jab = (...args) => new chroma.Color(...jab2rgb(args).map((c) => Math.floor(c * 255)), 'rgb'); // HSLuv chroma.Color.prototype.hsluv = function () { return hsluv.rgbToHsluv(this._rgb.slice(0, 3).map((c) => c / 255)); }; - chroma.hsluv = (...args) => - new chroma.Color( - ...hsluv.hsluvToRgb(args).map((c) => Math.floor(c * 255)), - "rgb", - ); + chroma.hsluv = (...args) => new chroma.Color(...hsluv.hsluvToRgb(args).map((c) => Math.floor(c * 255)), 'rgb'); const oldInterpol = chroma.interpolate; const RGB2 = { jch: rgb2jch, jab: rgb2jab, - hsluv: hsluv.rgbToHsluv, + hsluv: hsluv.rgbToHsluv }; const lerpH = (a, b, t) => { const m = 360; @@ -204,12 +174,12 @@ exports.extendChroma = (chroma) => { return ((1 - t) * a + t * b) % m; }; - chroma.interpolate = (col1, col2, f = 0.5, mode = "lrgb") => { + chroma.interpolate = (col1, col2, f = 0.5, mode = 'lrgb') => { if (RGB2[mode]) { - if (typeof col1 !== "object") { + if (typeof col1 !== 'object') { col1 = new chroma.Color(col1); } - if (typeof col2 !== "object") { + if (typeof col2 !== 'object') { col2 = new chroma.Color(col2); } const xyz1 = RGB2[mode](col1.gl()); @@ -220,7 +190,7 @@ exports.extendChroma = (chroma) => { let Y; let Z; switch (mode) { - case "hsluv": + case 'hsluv': if (xyz1[1] < 1e-10) { xyz1[0] = xyz2[0]; } @@ -239,7 +209,7 @@ exports.extendChroma = (chroma) => { Y = xyz1[1] + (xyz2[1] - xyz1[1]) * f; Z = xyz1[2] + (xyz2[2] - xyz1[2]) * f; break; - case "jch": + case 'jch': if (grey1) { xyz1[2] = xyz2[2]; } @@ -255,9 +225,7 @@ exports.extendChroma = (chroma) => { Y = xyz1[1] + (xyz2[1] - xyz1[1]) * f; Z = xyz1[2] + (xyz2[2] - xyz1[2]) * f; } - return chroma[mode](X, Y, Z).alpha( - col1.alpha() + f * (col2.alpha() - col1.alpha()), - ); + return chroma[mode](X, Y, Z).alpha(col1.alpha() + f * (col2.alpha() - col1.alpha())); } return oldInterpol(col1, col2, f, mode); }; diff --git a/docs/ui/src/js/colorDetailsPanel.js b/docs/ui/src/js/colorDetailsPanel.js index 9dfcbc98..2c33701b 100644 --- a/docs/ui/src/js/colorDetailsPanel.js +++ b/docs/ui/src/js/colorDetailsPanel.js @@ -9,133 +9,120 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { - getColorClassByName, - getColorClassById, - getThemeContrastRatios, - getLuminosities, -} from "./getThemeData"; -import { addKeyColor, addKeyColorInput, clearAllColors } from "./keyColors"; -import { addBulk } from "./addBulkDialog"; -import { throttle } from "./utils"; -import { toggleControls, themeUpdateParams } from "./themeUpdate"; -import { updateRamps, themeRamp, themeRampKeyColors } from "./ramps"; -import { createInterpolationCharts } from "./createInterpolationCharts"; -import { createRGBchannelChart } from "./createRGBchannelChart"; -import { baseScaleOptions } from "./createBaseScaleOptions"; -import { openDetailTab } from "./tabs"; -import { createDetailOutputColors } from "./createOutputColors"; -import { _theme, _colorScales } from "./initialTheme"; -import { downloadSVGgradient } from "./createSVGgradient"; -import { create3dModel } from "./create3dModel"; -import { - createColorWheel, - updateColorDots, - updateColorWheel, -} from "./colorWheel"; -import { createRatioChart, createLuminosityChart } from "./createRatioChart"; +import {getColorClassByName, getColorClassById, getThemeContrastRatios, getLuminosities} from './getThemeData'; +import {addKeyColor, addKeyColorInput, clearAllColors} from './keyColors'; +import {addBulk} from './addBulkDialog'; +import {throttle} from './utils'; +import {toggleControls, themeUpdateParams} from './themeUpdate'; +import {updateRamps, themeRamp, themeRampKeyColors} from './ramps'; +import {createInterpolationCharts} from './createInterpolationCharts'; +import {createRGBchannelChart} from './createRGBchannelChart'; +import {baseScaleOptions} from './createBaseScaleOptions'; +import {openDetailTab} from './tabs'; +import {createDetailOutputColors} from './createOutputColors'; +import {_theme, _colorScales} from './initialTheme'; +import {downloadSVGgradient} from './createSVGgradient'; +import {create3dModel} from './create3dModel'; +import {createColorWheel, updateColorDots, updateColorWheel} from './colorWheel'; +import {createRatioChart, createLuminosityChart} from './createRatioChart'; function showColorDetails(e, colorId) { let panelOpen = true; let element = e.target.id; - const chartsModeSelect = document.getElementById("chartsMode"); + const chartsModeSelect = document.getElementById('chartsMode'); - const id = colorId ? colorId : element.replace("-toggleConfig", ""); - let triggeredColorNameInputId = id.concat("_colorName"); - let triggeredColorNameInput = document.getElementById( - triggeredColorNameInputId, - ); + const id = colorId ? colorId : element.replace('-toggleConfig', ''); + let triggeredColorNameInputId = id.concat('_colorName'); + let triggeredColorNameInput = document.getElementById(triggeredColorNameInputId); let triggeredColorName = triggeredColorNameInput.value; - const lineTypeSelect = document.getElementById("chartLineType"); + const lineTypeSelect = document.getElementById('chartLineType'); const lineType = lineTypeSelect.value; let colorData = getColorClassByName(triggeredColorName); // Clear main container - let contentArea = document.getElementById("colorDetails"); - contentArea.style.display = "flex"; + let contentArea = document.getElementById('colorDetails'); + contentArea.style.display = 'flex'; // Clear config panel, just to be safe - let configPanel = document.getElementById("colorConfigPanel"); - configPanel.innerHTML = " "; - configPanel.style.display = "flex"; + let configPanel = document.getElementById('colorConfigPanel'); + configPanel.innerHTML = ' '; + configPanel.style.display = 'flex'; - let configPanelTopWrapper = document.createElement("div"); - configPanelTopWrapper.className = - "spectrum-Panel-Item spectrum-Panel-Item--noPadding"; + let configPanelTopWrapper = document.createElement('div'); + configPanelTopWrapper.className = 'spectrum-Panel-Item spectrum-Panel-Item--noPadding'; - let configPanelItem = document.createElement("div"); - configPanelItem.className = "spectrum-Panel-Item spectrum-Form--row"; + let configPanelItem = document.createElement('div'); + configPanelItem.className = 'spectrum-Panel-Item spectrum-Form--row'; // create unique ID for color object let thisId = id; let wrapper = contentArea; // Create back button - let panelHeader = document.createElement("div"); - panelHeader.className = "spectrum-Panel-Item"; + let panelHeader = document.createElement('div'); + panelHeader.className = 'spectrum-Panel-Item'; - let backButton = document.createElement("button"); - backButton.className = - "spectrum-Button spectrum-Button--sizeM spectrum-Button--cta spectrum-ButtonGroup-item"; - backButton.title = "Save and go back"; + let backButton = document.createElement('button'); + backButton.className = 'spectrum-Button spectrum-Button--sizeM spectrum-Button--cta spectrum-ButtonGroup-item'; + backButton.title = 'Save and go back'; backButton.innerHTML = `Save and go back`; backButton.onclick = () => { - contentArea.innerHTML = " "; - contentArea.style.display = "none"; - configPanel.innerHTML = " "; - configPanel.style.display = "none"; + contentArea.innerHTML = ' '; + contentArea.style.display = 'none'; + configPanel.innerHTML = ' '; + configPanel.style.display = 'none'; panelOpen = false; themeUpdateParams(); }; - let headerButtonGroup = document.createElement("div"); - headerButtonGroup.className = "spectrum-ButtonGroup"; + let headerButtonGroup = document.createElement('div'); + headerButtonGroup.className = 'spectrum-ButtonGroup'; headerButtonGroup.appendChild(backButton); panelHeader.appendChild(headerButtonGroup); // Create gradient - let gradient = document.createElement("div"); - gradient.className = "themeColor_gradient"; - let gradientId = thisId.concat("_gradient"); + let gradient = document.createElement('div'); + gradient.className = 'themeColor_gradient'; + let gradientId = thisId.concat('_gradient'); gradient.id = gradientId; // Create first panel item - let panelColorName = document.createElement("div"); - panelColorName.className = "spectrum-Panel-Item"; + let panelColorName = document.createElement('div'); + panelColorName.className = 'spectrum-Panel-Item'; // Create form container - let inputs = document.createElement("div"); + let inputs = document.createElement('div'); inputs.className = `spectrum-Form spectrum-Form--row themeColor_configs`; inputs.id = `${thisId}-themeColor_configs`; - let interpInputs = document.createElement("div"); + let interpInputs = document.createElement('div'); interpInputs.className = `spectrum-Form spectrum-Form--row`; interpInputs.id = `${thisId}-themeColor_keyColors`; // Field label - let colorNameLabel = document.createElement("label"); - colorNameLabel.className = "spectrum-Fieldlabel spectrum-Fieldlabel--sizeM"; - colorNameLabel.innerHTML = "Color name"; + let colorNameLabel = document.createElement('label'); + colorNameLabel.className = 'spectrum-Fieldlabel spectrum-Fieldlabel--sizeM'; + colorNameLabel.innerHTML = 'Color name'; // Color Name Input - let colorName = document.createElement("div"); - colorName.className = "spectrum-Form-item"; - let colorNameInput = document.createElement("input"); - let colorNameWrapper = document.createElement("div"); - colorNameWrapper.className = "spectrum-Textfield spectrum-Textfield--sizeM"; - colorNameInput.type = "text"; - colorNameInput.className = "spectrum-Textfield-input colorNameInput"; - colorNameInput.id = thisId.concat("_colorName2"); - colorNameInput.name = thisId.concat("_colorName2"); + let colorName = document.createElement('div'); + colorName.className = 'spectrum-Form-item'; + let colorNameInput = document.createElement('input'); + let colorNameWrapper = document.createElement('div'); + colorNameWrapper.className = 'spectrum-Textfield spectrum-Textfield--sizeM'; + colorNameInput.type = 'text'; + colorNameInput.className = 'spectrum-Textfield-input colorNameInput'; + colorNameInput.id = thisId.concat('_colorName2'); + colorNameInput.name = thisId.concat('_colorName2'); colorNameInput.value = colorData.name; let originalName = colorData.name; // colorNameInput.oninput = throttle(themeUpdateParams, 10); colorNameInput.onchange = (e) => { - let paletteNameInput = document.getElementById(thisId.concat("_colorName")); + let paletteNameInput = document.getElementById(thisId.concat('_colorName')); const newName = `${e.target.value}`; paletteNameInput.value = newName; - _theme.updateColor = { color: originalName, name: newName }; + _theme.updateColor = {color: originalName, name: newName}; baseScaleOptions(); @@ -147,57 +134,54 @@ function showColorDetails(e, colorId) { colorName.appendChild(colorNameWrapper); // Create second panel item - let panelKeyColors = document.createElement("div"); - panelKeyColors.className = "spectrum-Panel-Item"; + let panelKeyColors = document.createElement('div'); + panelKeyColors.className = 'spectrum-Panel-Item'; // Key Color Input - let keyColors = document.createElement("div"); - keyColors.className = "themeColor_subheading"; - let keyColorsLabel = document.createElement("h4"); - keyColorsLabel.className = "spectrum-Heading spectrum-Heading--sizeXXS"; - keyColorsLabel.for = thisId.concat("_keyColors"); - - let keyColorsInput = document.createElement("div"); - keyColorsInput.className = "keyColorsWrapper"; - let keyColorsId = thisId.concat("_keyColors"); + let keyColors = document.createElement('div'); + keyColors.className = 'themeColor_subheading'; + let keyColorsLabel = document.createElement('h4'); + keyColorsLabel.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; + keyColorsLabel.for = thisId.concat('_keyColors'); + + let keyColorsInput = document.createElement('div'); + keyColorsInput.className = 'keyColorsWrapper'; + let keyColorsId = thisId.concat('_keyColors'); keyColorsInput.id = keyColorsId; - keyColorsLabel.innerHTML = "Key colors"; + keyColorsLabel.innerHTML = 'Key colors'; keyColors.appendChild(keyColorsLabel); // Key Colors Actions - let addColors = document.createElement("div"); - addColors.className = "keyColorActions"; - let addButton = document.createElement("button"); - addButton.className = - "spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"; - let buttonId = thisId.concat("_addKeyColor"); + let addColors = document.createElement('div'); + addColors.className = 'keyColorActions'; + let addButton = document.createElement('button'); + addButton.className = 'spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet'; + let buttonId = thisId.concat('_addKeyColor'); addButton.id = buttonId; - addButton.title = "Add key color"; - addButton.addEventListener("click", addKeyColor); + addButton.title = 'Add key color'; + addButton.addEventListener('click', addKeyColor); addButton.innerHTML = ` `; - let bulkButton = document.createElement("button"); - bulkButton.className = - "spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"; - let bulkId = thisId.concat("_addBulk"); - bulkButton.title = "Add bulk key colors"; + let bulkButton = document.createElement('button'); + bulkButton.className = 'spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet'; + let bulkId = thisId.concat('_addBulk'); + bulkButton.title = 'Add bulk key colors'; bulkButton.id = bulkId; - bulkButton.addEventListener("click", addBulk); + bulkButton.addEventListener('click', addBulk); bulkButton.innerHTML = ` `; - let clearKeyColorsButton = document.createElement("button"); - clearKeyColorsButton.className = - "spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"; - let clearColorsId = thisId.concat("_clearAllColors"); - clearKeyColorsButton.title = "Clear all key colors"; + let clearKeyColorsButton = document.createElement('button'); + clearKeyColorsButton.className = 'spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet'; + let clearColorsId = thisId.concat('_clearAllColors'); + clearKeyColorsButton.title = 'Clear all key colors'; clearKeyColorsButton.id = clearColorsId; - clearKeyColorsButton.addEventListener("click", clearAllColors); + clearKeyColorsButton.addEventListener('click', clearAllColors); clearKeyColorsButton.innerHTML = ` Download SVG gradient`; - downloadGradient.addEventListener("click", (e) => { - downloadSVGgradient( - colorData.backgroundColorScale, - colorData.colorspace, - colorData.name, - ); + downloadGradient.addEventListener('click', (e) => { + downloadSVGgradient(colorData.backgroundColorScale, colorData.colorspace, colorData.name); }); - let panelExport = document.createElement("div"); - panelExport.className = "spectrum-Panel-Item"; - let panelExportTitle = document.createElement("span"); - panelExportTitle.className = - "spectrum-Heading spectrum-Heading--sizeXXS spectrum-Panel-Item-Title"; - panelExportTitle.innerHTML = "Export color scale"; + let panelExport = document.createElement('div'); + panelExport.className = 'spectrum-Panel-Item'; + let panelExportTitle = document.createElement('span'); + panelExportTitle.className = 'spectrum-Heading spectrum-Heading--sizeXXS spectrum-Panel-Item-Title'; + panelExportTitle.innerHTML = 'Export color scale'; panelExport.appendChild(panelExportTitle); panelExport.appendChild(downloadGradient); // Actions - let actions = document.createElement("div"); - actions.className = "spectrum-ButtonGroup"; + let actions = document.createElement('div'); + actions.className = 'spectrum-ButtonGroup'; - let deleteColor = document.createElement("button"); - deleteColor.className = - "spectrum-Button spectrum-Button--sizeM spectrum-Button--negative"; - deleteColor.title = "Delete color"; - deleteColor.id = thisId.concat("_delete"); - deleteColor.innerHTML = "Delete color"; + let deleteColor = document.createElement('button'); + deleteColor.className = 'spectrum-Button spectrum-Button--sizeM spectrum-Button--negative'; + deleteColor.title = 'Delete color'; + deleteColor.id = thisId.concat('_delete'); + deleteColor.innerHTML = 'Delete color'; - let bottomPanel = document.createElement("div"); - bottomPanel.className = "spectrum-Panel-Item spectrum-Panel-Item--noPadding"; + let bottomPanel = document.createElement('div'); + bottomPanel.className = 'spectrum-Panel-Item spectrum-Panel-Item--noPadding'; // Create color wheel for the scale - const scaleType = "colorScale"; - let colorWheelPanel = document.createElement("div"); - colorWheelPanel.className = "spectrum-Panel-Item"; - let colorWheelWrapper = document.createElement("div"); - colorWheelWrapper.id = scaleType.concat("ColorWheelWrapper"); - colorWheelWrapper.className = "tab-ColorWheel"; - - let colorWheel = document.createElement("div"); - colorWheel.id = scaleType.concat("ColorWheel"); - let colorWheelPaths = document.createElement("div"); - colorWheelPaths.id = scaleType.concat("ColorWheelPaths"); - colorWheelPaths.className = "polarPathsWrapper"; + const scaleType = 'colorScale'; + let colorWheelPanel = document.createElement('div'); + colorWheelPanel.className = 'spectrum-Panel-Item'; + let colorWheelWrapper = document.createElement('div'); + colorWheelWrapper.id = scaleType.concat('ColorWheelWrapper'); + colorWheelWrapper.className = 'tab-ColorWheel'; + + let colorWheel = document.createElement('div'); + colorWheel.id = scaleType.concat('ColorWheel'); + let colorWheelPaths = document.createElement('div'); + colorWheelPaths.id = scaleType.concat('ColorWheelPaths'); + colorWheelPaths.className = 'polarPathsWrapper'; colorWheel.appendChild(colorWheelPaths); colorWheelWrapper.appendChild(colorWheel); // colorWheelPanel.appendChild(colorWheelWrapper); - let deletePanel = document.createElement("div"); - deletePanel.className = "spectrum-Panel-Item spectrum-ButtonGroup"; + let deletePanel = document.createElement('div'); + deletePanel.className = 'spectrum-Panel-Item spectrum-ButtonGroup'; deletePanel.appendChild(deleteColor); colorName.appendChild(actions); @@ -391,79 +362,76 @@ function showColorDetails(e, colorId) { */ // Title - let title = document.createElement("h2"); - title.className = - "spectrum-Typography spectrum-Heading spectrum-Heading--sizeXS"; - title.innerHTML = "Color scale"; + let title = document.createElement('h2'); + title.className = 'spectrum-Typography spectrum-Heading spectrum-Heading--sizeXS'; + title.innerHTML = 'Color scale'; // Tabs - let tabsWrapper = document.createElement("div"); - tabsWrapper.className = "spectrum-Detail-Tabs"; - - let tabs = document.createElement("div"); - tabs.className = - "spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet"; - let tabItem1 = document.createElement("div"); - tabItem1.className = "spectrum-Tabs-item detail-Tabs-item"; - tabItem1.id = "tabInterpCharts"; - let tabItem1Label = document.createElement("label"); - tabItem1Label.className = "spectrum-Tabs-itemLabel"; - tabItem1Label.innerHTML = "Color charts"; - - let tabItem2 = document.createElement("div"); - tabItem2.className = "spectrum-Tabs-item detail-Tabs-item"; - tabItem2.id = "tabLightness"; - let tabItem2Label = document.createElement("label"); - tabItem2Label.className = "spectrum-Tabs-itemLabel"; - tabItem2Label.innerHTML = "Lightness stops"; - - let tabItem3 = document.createElement("div"); - tabItem3.className = "spectrum-Tabs-item detail-Tabs-item"; - tabItem3.id = "tabModel"; - let tabItem3Label = document.createElement("label"); - tabItem3Label.className = "spectrum-Tabs-itemLabel"; - tabItem3Label.innerHTML = "3d model"; - - let tabContent1 = document.createElement("div"); - tabContent1.id = "tabInterpChartsContent"; - tabContent1.className = "tabDetailContent"; - - let tabContent2 = document.createElement("div"); - tabContent2.id = "tabLightnessContent"; - tabContent2.className = "tabDetailContent"; - - let tabContent3 = document.createElement("div"); - tabContent3.id = "tabModelContent"; - tabContent3.className = "tabDetailContent"; + let tabsWrapper = document.createElement('div'); + tabsWrapper.className = 'spectrum-Detail-Tabs'; + + let tabs = document.createElement('div'); + tabs.className = 'spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet'; + let tabItem1 = document.createElement('div'); + tabItem1.className = 'spectrum-Tabs-item detail-Tabs-item'; + tabItem1.id = 'tabInterpCharts'; + let tabItem1Label = document.createElement('label'); + tabItem1Label.className = 'spectrum-Tabs-itemLabel'; + tabItem1Label.innerHTML = 'Color charts'; + + let tabItem2 = document.createElement('div'); + tabItem2.className = 'spectrum-Tabs-item detail-Tabs-item'; + tabItem2.id = 'tabLightness'; + let tabItem2Label = document.createElement('label'); + tabItem2Label.className = 'spectrum-Tabs-itemLabel'; + tabItem2Label.innerHTML = 'Lightness stops'; + + let tabItem3 = document.createElement('div'); + tabItem3.className = 'spectrum-Tabs-item detail-Tabs-item'; + tabItem3.id = 'tabModel'; + let tabItem3Label = document.createElement('label'); + tabItem3Label.className = 'spectrum-Tabs-itemLabel'; + tabItem3Label.innerHTML = '3d model'; + + let tabContent1 = document.createElement('div'); + tabContent1.id = 'tabInterpChartsContent'; + tabContent1.className = 'tabDetailContent'; + + let tabContent2 = document.createElement('div'); + tabContent2.id = 'tabLightnessContent'; + tabContent2.className = 'tabDetailContent'; + + let tabContent3 = document.createElement('div'); + tabContent3.id = 'tabModelContent'; + tabContent3.className = 'tabDetailContent'; // Create charts grid (wrapper) - let chartsGrid = document.createElement("div"); - chartsGrid.className = "paletteContrastChartsGrid"; + let chartsGrid = document.createElement('div'); + chartsGrid.className = 'paletteContrastChartsGrid'; // Create select for chart line type - let chartsForm = document.createElement("div"); - chartsForm.className = "spectrum-Form spectrum-Form--row"; - chartsForm.style.justifyContent = "space-between"; + let chartsForm = document.createElement('div'); + chartsForm.className = 'spectrum-Form spectrum-Form--row'; + chartsForm.style.justifyContent = 'space-between'; // Create title - let chartsFormTitle = document.createElement("h5"); - chartsFormTitle.className = "spectrum-Heading spectrum-Heading--sizeXXS"; - chartsFormTitle.style.width = "auto"; - chartsFormTitle.innerHTML = "Output color (ordered by contrast ascending)"; + let chartsFormTitle = document.createElement('h5'); + chartsFormTitle.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; + chartsFormTitle.style.width = 'auto'; + chartsFormTitle.innerHTML = 'Output color (ordered by contrast ascending)'; // Create form item - let chartsFormItem = document.createElement("div"); - chartsFormItem.className = "spectrum-Form-item spectrum-Form-item--row"; + let chartsFormItem = document.createElement('div'); + chartsFormItem.className = 'spectrum-Form-item spectrum-Form-item--row'; // Create lebel - let chartsFormLabel = document.createElement("label"); - chartsFormLabel.for = "lightnessChartLineType"; - chartsFormLabel.className = - "spectrum-FieldLabel spectrum-Fieldlabel--sizeM spectrum-FieldLabel--left"; - chartsFormLabel.innerHTML = "Chart line type"; + let chartsFormLabel = document.createElement('label'); + chartsFormLabel.for = 'lightnessChartLineType'; + chartsFormLabel.className = 'spectrum-FieldLabel spectrum-Fieldlabel--sizeM spectrum-FieldLabel--left'; + chartsFormLabel.innerHTML = 'Chart line type'; // Create select - let chartsSelect = document.createElement("select"); - chartsSelect.className = "spectrum-Picker spectrum-Picker--sizeM"; - chartsSelect.name = "lightnessChartLineType"; - chartsSelect.id = "lightnessChartLineType"; - let chartsSelectIcon = document.createElement("span"); - chartsSelectIcon.className = "spectrum-Picker-iconWrapper"; + let chartsSelect = document.createElement('select'); + chartsSelect.className = 'spectrum-Picker spectrum-Picker--sizeM'; + chartsSelect.name = 'lightnessChartLineType'; + chartsSelect.id = 'lightnessChartLineType'; + let chartsSelectIcon = document.createElement('span'); + chartsSelectIcon.className = 'spectrum-Picker-iconWrapper'; chartsSelectIcon.innerHTML = ` @@ -471,40 +439,37 @@ function showColorDetails(e, colorId) { // Populate options chartsSelect.options.length = 0; let chartsSelectOpts = { - step: "Steps", - curve: "Curve", + step: 'Steps', + curve: 'Curve' }; for (let index in chartsSelectOpts) { - chartsSelect.options[chartsSelect.options.length] = new Option( - chartsSelectOpts[index], - index, - ); + chartsSelect.options[chartsSelect.options.length] = new Option(chartsSelectOpts[index], index); } chartsSelect.value = lineType; // Create swatch output wrapper - let swatchWrapper = document.createElement("div"); - swatchWrapper.id = "detailJustifiedWrapper"; - let swatches = document.createElement("div"); - swatches.className = "hideSwatchLuminosity hideSwatchContrast"; - swatches.id = "detailSwatchesOutputs"; + let swatchWrapper = document.createElement('div'); + swatchWrapper.id = 'detailJustifiedWrapper'; + let swatches = document.createElement('div'); + swatches.className = 'hideSwatchLuminosity hideSwatchContrast'; + swatches.id = 'detailSwatchesOutputs'; // Create charts wrapper - let swatchChartsWrapper = document.createElement("div"); - swatchChartsWrapper.id = "detailContrastChartsWrapper"; + let swatchChartsWrapper = document.createElement('div'); + swatchChartsWrapper.id = 'detailContrastChartsWrapper'; // Create Contrast chart - let contrastChartWrapper = document.createElement("div"); - let contrastChartTitle = document.createElement("h5"); - contrastChartTitle.className = "spectrum-Heading spectrum-Heading--sizeXXS"; - contrastChartTitle.innerHTML = "Contrast"; - let contrastChart = document.createElement("div"); - contrastChart.className = "panel-SubTab-Content"; - contrastChart.id = "detailContrastChart"; - let lightnessChartWrapper = document.createElement("div"); - let lightnessChartTitle = document.createElement("h5"); - lightnessChartTitle.className = "spectrum-Heading spectrum-Heading--sizeXXS"; - lightnessChartTitle.innerHTML = "Lightness"; - let lightnessChart = document.createElement("div"); - lightnessChart.className = "panel-SubTab-Content"; - lightnessChart.id = "detailLightnessChart"; + let contrastChartWrapper = document.createElement('div'); + let contrastChartTitle = document.createElement('h5'); + contrastChartTitle.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; + contrastChartTitle.innerHTML = 'Contrast'; + let contrastChart = document.createElement('div'); + contrastChart.className = 'panel-SubTab-Content'; + contrastChart.id = 'detailContrastChart'; + let lightnessChartWrapper = document.createElement('div'); + let lightnessChartTitle = document.createElement('h5'); + lightnessChartTitle.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; + lightnessChartTitle.innerHTML = 'Lightness'; + let lightnessChart = document.createElement('div'); + lightnessChart.className = 'panel-SubTab-Content'; + lightnessChart.id = 'detailLightnessChart'; // Put the charts tab content together chartsSelect.appendChild(chartsSelectIcon); chartsFormItem.appendChild(chartsFormLabel); @@ -565,23 +530,23 @@ function showColorDetails(e, colorId) { wrapper.appendChild(gradient); // Create divs for charts - let chartsRow = document.createElement("div"); - chartsRow.className = "chartsRow"; + let chartsRow = document.createElement('div'); + chartsRow.className = 'chartsRow'; - let chartsColLeft = document.createElement("div"); - chartsColLeft.className = "chartsColumn--left"; + let chartsColLeft = document.createElement('div'); + chartsColLeft.className = 'chartsColumn--left'; - let chartsColRight = document.createElement("div"); - chartsColRight.className = "chartsColumn--right"; + let chartsColRight = document.createElement('div'); + chartsColRight.className = 'chartsColumn--right'; - let chart1 = document.createElement("div"); - chart1.id = "interpolationChart"; - let chart2 = document.createElement("div"); - chart2.id = "interpolationChart2"; - let chart3 = document.createElement("div"); - chart3.id = "interpolationChart3"; - let chartRgb = document.createElement("div"); - chartRgb.id = "RGBchart"; + let chart1 = document.createElement('div'); + chart1.id = 'interpolationChart'; + let chart2 = document.createElement('div'); + chart2.id = 'interpolationChart2'; + let chart3 = document.createElement('div'); + chart3.id = 'interpolationChart3'; + let chartRgb = document.createElement('div'); + chartRgb.id = 'RGBchart'; chartsColLeft.appendChild(colorWheelWrapper); // wheel chartsColLeft.appendChild(chartRgb); @@ -610,28 +575,19 @@ function showColorDetails(e, colorId) { let colors = rampData; - let detailLineType = document.getElementById("lightnessChartLineType"); + let detailLineType = document.getElementById('lightnessChartLineType'); - chartsModeSelect.addEventListener("change", (e) => { + chartsModeSelect.addEventListener('change', (e) => { if (panelOpen) { const thisColorId = id; let colorData = getColorClassById(thisColorId); - let lightness = - e.target.value === "HSV" ? 100 : e.target.value === "HSLuv" ? 60 : 50; + let lightness = e.target.value === 'HSV' ? 100 : e.target.value === 'HSLuv' ? 60 : 50; let colors = colorData.backgroundColorScale; createInterpolationCharts(colors, e.target.value); - create3dModel("tabModelContent", [colorData], e.target.value); - updateColorWheel( - e.target.value, - lightness, - true, - null, - scaleType, - colorData.colorKeys, - thisColorId, - ); + create3dModel('tabModelContent', [colorData], e.target.value); + updateColorWheel(e.target.value, lightness, true, null, scaleType, colorData.colorKeys, thisColorId); } }); @@ -652,7 +608,7 @@ function showColorDetails(e, colorId) { createLuminosityChart(resolve); }); - create3dModel("tabModelContent", [colorData], chartsModeSelect.value); + create3dModel('tabModelContent', [colorData], chartsModeSelect.value); // Make the color wheel createColorWheel(chartsModeSelect.value, 50, scaleType); @@ -660,21 +616,19 @@ function showColorDetails(e, colorId) { toggleControls(); - document - .getElementById(thisId.concat("_colorName")) - .addEventListener("input", function (e) {}); - document.getElementById("tabInterpCharts").addEventListener("click", (e) => { - openDetailTab(e, "tabInterpChartsContent"); + document.getElementById(thisId.concat('_colorName')).addEventListener('input', function (e) {}); + document.getElementById('tabInterpCharts').addEventListener('click', (e) => { + openDetailTab(e, 'tabInterpChartsContent'); }); - document.getElementById("tabLightness").addEventListener("click", (e) => { - openDetailTab(e, "tabLightnessContent"); + document.getElementById('tabLightness').addEventListener('click', (e) => { + openDetailTab(e, 'tabLightnessContent'); }); - document.getElementById("tabModel").addEventListener("click", (e) => { - openDetailTab(e, "tabModelContent", colors); + document.getElementById('tabModel').addEventListener('click', (e) => { + openDetailTab(e, 'tabModelContent', colors); }); - document.getElementById("tabInterpCharts").click(); + document.getElementById('tabInterpCharts').click(); - deleteColor.addEventListener("click", function (e) { + deleteColor.addEventListener('click', function (e) { const thisColorId = id; // let colorData = getColorClassById(thisColorId); @@ -684,19 +638,19 @@ function showColorDetails(e, colorId) { const deleteButton = document.getElementById(`${thisColorId}_delete`); deleteButton.click(); - contentArea.innerHTML = " "; - contentArea.style.display = "none"; - configPanel.innerHTML = " "; - configPanel.style.display = "none"; + contentArea.innerHTML = ' '; + contentArea.style.display = 'none'; + configPanel.innerHTML = ' '; + configPanel.style.display = 'none'; panelOpen = false; }); - detailLineType.addEventListener("change", (e) => { + detailLineType.addEventListener('change', (e) => { let val = e.target.value; lineTypeSelect.value = val; - lineTypeSelect.dispatchEvent(new Event("change")); + lineTypeSelect.dispatchEvent(new Event('change')); }); } -module.exports = { showColorDetails }; +module.exports = {showColorDetails}; diff --git a/docs/ui/src/js/colorScale.js b/docs/ui/src/js/colorScale.js index 4d9e66f5..23b88d23 100644 --- a/docs/ui/src/js/colorScale.js +++ b/docs/ui/src/js/colorScale.js @@ -9,19 +9,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import { _theme } from "./initialTheme"; +import * as Leo from '@adobe/leonardo-contrast-colors'; +import {_theme} from './initialTheme'; // import {updateParams} from './params'; -import { getContrastRatioInputs } from "./getThemeData"; -import { randomId } from "./utils"; -import { themeUpdateParams, toggleControls } from "./themeUpdate"; -import { baseScaleOptions } from "./createBaseScaleOptions"; -import { showColorDetails } from "./colorDetailsPanel"; -import { themeRamp } from "./ramps"; -import { - predefinedColorNames, - getRandomColorName, -} from "./predefinedColorNames"; +import {getContrastRatioInputs} from './getThemeData'; +import {randomId} from './utils'; +import {themeUpdateParams, toggleControls} from './themeUpdate'; +import {baseScaleOptions} from './createBaseScaleOptions'; +import {showColorDetails} from './colorDetailsPanel'; +import {themeRamp} from './ramps'; +import {predefinedColorNames, getRandomColorName} from './predefinedColorNames'; function addColorScaleUpdate(c, k, s, r) { addColorScale(c, k, s, r); @@ -34,7 +31,7 @@ function addColorScale(newColor, addToTheme = true) { let colorNameOptions = predefinedColorNames; if (!newColor) { - if (_theme.colors.length == 0) colorNameValue = "Gray"; + if (_theme.colors.length == 0) colorNameValue = 'Gray'; else { colorNameValue = getRandomColorName(); } @@ -43,10 +40,10 @@ function addColorScale(newColor, addToTheme = true) { newColor = new Leo.BackgroundColor({ name: colorNameValue, - colorKeys: ["#000000"], - colorspace: "RGB", + colorKeys: ['#000000'], + colorspace: 'RGB', ratios: ratios, - output: "RGB", + output: 'RGB' }); } else { colorNameValue = newColor.name; @@ -59,46 +56,45 @@ function addColorScale(newColor, addToTheme = true) { // create unique ID for color object let thisId = randomId(); - let wrapper = document.getElementById("themeColorWrapper"); - let emptyState = document.getElementById("themeColorEmptyState"); + let wrapper = document.getElementById('themeColorWrapper'); + let emptyState = document.getElementById('themeColorEmptyState'); // Remove empty state - if (emptyState.classList.contains("is-hidden")) { + if (emptyState.classList.contains('is-hidden')) { // Do nothing } else { - emptyState.classList.add("is-hidden"); + emptyState.classList.add('is-hidden'); } // Create theme item - let item = document.createElement("button"); - item.className = "themeColor_item"; + let item = document.createElement('button'); + item.className = 'themeColor_item'; item.id = thisId; item.tabIndex = -1; // Create color gradient swatch - let gradientSwatch = document.createElement("div"); - let gradientSwatchId = thisId.concat("_gradientSwatch"); + let gradientSwatch = document.createElement('div'); + let gradientSwatchId = thisId.concat('_gradientSwatch'); gradientSwatch.id = gradientSwatchId; - gradientSwatch.className = "gradientSwatch"; + gradientSwatch.className = 'gradientSwatch'; // Color Name Input - let colorName = document.createElement("div"); - colorName.className = "spectrum-Form-item spectrum-Form-item--row"; - let colorNameInputWrapper = document.createElement("div"); - colorNameInputWrapper.className = - "spectrum-Textfield spectrum-Textfield--quiet colorNameInput"; - let colorNameInput = document.createElement("input"); - colorNameInput.type = "text"; - colorNameInput.className = "spectrum-Textfield-input"; - colorNameInput.id = thisId.concat("_colorName"); - colorNameInput.name = thisId.concat("_colorName"); + let colorName = document.createElement('div'); + colorName.className = 'spectrum-Form-item spectrum-Form-item--row'; + let colorNameInputWrapper = document.createElement('div'); + colorNameInputWrapper.className = 'spectrum-Textfield spectrum-Textfield--quiet colorNameInput'; + let colorNameInput = document.createElement('input'); + colorNameInput.type = 'text'; + colorNameInput.className = 'spectrum-Textfield-input'; + colorNameInput.id = thisId.concat('_colorName'); + colorNameInput.name = thisId.concat('_colorName'); colorNameInput.value = newColor.name; - colorNameInput.addEventListener("focus", (e) => { + colorNameInput.addEventListener('focus', (e) => { colorNameValue = e.target.value; }); - colorNameInput.addEventListener("change", (e) => { + colorNameInput.addEventListener('change', (e) => { let newValue = e.target.value; - _theme.updateColor = { color: colorNameValue, name: newValue }; + _theme.updateColor = {color: colorNameValue, name: newValue}; baseScaleOptions(); colorNameValue = newValue; @@ -107,25 +103,22 @@ function addColorScale(newColor, addToTheme = true) { colorName.appendChild(colorNameInputWrapper); // Actions - let actions = document.createElement("div"); - actions.className = - "spectrum-ButtonGroup spectrum-Form-item spectrum-Form-item--row labelSpacer"; - let edit = document.createElement("button"); - edit.className = - "spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"; + let actions = document.createElement('div'); + actions.className = 'spectrum-ButtonGroup spectrum-Form-item spectrum-Form-item--row labelSpacer'; + let edit = document.createElement('button'); + edit.className = 'spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet'; edit.id = `${thisId}-toggleConfig`; - edit.title = "Show / hide configurations"; + edit.title = 'Show / hide configurations'; edit.innerHTML = ` `; - edit.addEventListener("click", showColorDetails); - let deleteColor = document.createElement("button"); - deleteColor.className = - "spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet"; - deleteColor.title = "Delete color scale"; - deleteColor.id = thisId.concat("_delete"); + edit.addEventListener('click', showColorDetails); + let deleteColor = document.createElement('button'); + deleteColor.className = 'spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet'; + deleteColor.title = 'Delete color scale'; + deleteColor.id = thisId.concat('_delete'); deleteColor.innerHTML = `
- `, + ` ]; rows.push(rowItem); } // Create report table per specified level - createTable(headers, rows, "colorDifferenceReport"); + createTable(headers, rows, 'colorDifferenceReport'); } function contrastReport(fg, bg, level) { // Get output targets - let contrastWrapper = document.getElementById("contrastOutput"); - let contrastReportWrapper = document.getElementById("contrastReport"); - contrastWrapper.innerHTML = " "; - contrastReportWrapper.innerHTML = " "; + let contrastWrapper = document.getElementById('contrastOutput'); + let contrastReportWrapper = document.getElementById('contrastReport'); + contrastWrapper.innerHTML = ' '; + contrastReportWrapper.innerHTML = ' '; // Calculate contrast and update UI with results let fgArray = fg.rgb(); @@ -106,16 +89,16 @@ function contrastReport(fg, bg, level) { let contrast = Leo.contrast(fgArray, bgArray); // Create swatches and ratio output - let outerSwatch = document.createElement("div"); - outerSwatch.className = "contrastSwatch--outer"; + let outerSwatch = document.createElement('div'); + outerSwatch.className = 'contrastSwatch--outer'; outerSwatch.style.backgroundColor = bg.hex(); - let innerSwatch = document.createElement("div"); - innerSwatch.className = "contrastSwatch--inner"; + let innerSwatch = document.createElement('div'); + innerSwatch.className = 'contrastSwatch--inner'; innerSwatch.style.backgroundColor = fg.hex(); - let ratioText = document.createElement("span"); - ratioText.className = "spectrum-Heading spectrum-Heading--sizeXXXL"; + let ratioText = document.createElement('span'); + ratioText.className = 'spectrum-Heading spectrum-Heading--sizeXXXL'; ratioText.innerHTML = round(contrast, 2); outerSwatch.appendChild(innerSwatch); @@ -123,46 +106,34 @@ function contrastReport(fg, bg, level) { contrastWrapper.appendChild(ratioText); let WCAGmins; - if (level === "AA") { + if (level === 'AA') { WCAGmins = [4.5, 3, 3]; } - if (level === "AAA") { + if (level === 'AAA') { WCAGmins = [7, 4.5, 3]; } - let smallTextClass = contrast < WCAGmins[0] ? "negative" : "positive"; - let largeTextClass = contrast < WCAGmins[1] ? "negative" : "positive"; - let uiClass = contrast < WCAGmins[2] ? "negative" : "positive"; + let smallTextClass = contrast < WCAGmins[0] ? 'negative' : 'positive'; + let largeTextClass = contrast < WCAGmins[1] ? 'negative' : 'positive'; + let uiClass = contrast < WCAGmins[2] ? 'negative' : 'positive'; - let smallTextStatus = contrast < WCAGmins[0] ? "Fail" : "Pass"; - let largeTextStatus = contrast < WCAGmins[1] ? "Fail" : "Pass"; - let uiStatus = contrast < WCAGmins[2] ? "Fail" : "Pass"; + let smallTextStatus = contrast < WCAGmins[0] ? 'Fail' : 'Pass'; + let largeTextStatus = contrast < WCAGmins[1] ? 'Fail' : 'Pass'; + let uiStatus = contrast < WCAGmins[2] ? 'Fail' : 'Pass'; // Create report table per specified level - let WCAG2Headers = ["WCAG Criteria", "Score", "Minimum"]; + let WCAG2Headers = ['WCAG Criteria', 'Score', 'Minimum']; let WCAG2Rows = [ - [ - "Regular text (24px / 19px bold and below)", - `${smallTextStatus}`, - WCAGmins[0], - ], - [ - "Large text (24px / 19px bold and above)", - `${largeTextStatus}`, - WCAGmins[1], - ], - [ - "UI Components & graphics", - `${uiStatus}`, - WCAGmins[2], - ], + ['Regular text (24px / 19px bold and below)', `${smallTextStatus}`, WCAGmins[0]], + ['Large text (24px / 19px bold and above)', `${largeTextStatus}`, WCAGmins[1]], + ['UI Components & graphics', `${uiStatus}`, WCAGmins[2]] ]; - createTable(WCAG2Headers, WCAG2Rows, "contrastReport"); + createTable(WCAG2Headers, WCAG2Rows, 'contrastReport'); } function levelSelect(e) { let value = e.target.value; - let fg = chroma(document.getElementById("compareColorOneInput").value); - let bg = chroma(document.getElementById("compareColorTwoInput").value); + let fg = chroma(document.getElementById('compareColorOneInput').value); + let bg = chroma(document.getElementById('compareColorTwoInput').value); let blendedValue = alphaBlend(fg.hex(), bg); @@ -173,8 +144,8 @@ function compareColors(e) { if (e !== undefined) { // Identify which input is triggered let id = e.target.id; - let swatchId = id.replace("Input", "_swatch"); - let pickerId = id.replace("Input", "_picker"); + let swatchId = id.replace('Input', '_swatch'); + let pickerId = id.replace('Input', '_picker'); let value = e.target.value; // If it's a valid color input, do this stuff... @@ -188,15 +159,11 @@ function compareColors(e) { picker.value = chroma(color).hex(); // Maybe do some stuffs... then, - let fg = id.includes("One") - ? color - : chroma(document.getElementById("compareColorOneInput").value); - let bg = id.includes("Two") - ? color - : chroma(document.getElementById("compareColorTwoInput").value); + let fg = id.includes('One') ? color : chroma(document.getElementById('compareColorOneInput').value); + let bg = id.includes('Two') ? color : chroma(document.getElementById('compareColorTwoInput').value); // Get value for the rating level for the report. - let ratingSelect = document.getElementById("complianceLevel"); + let ratingSelect = document.getElementById('complianceLevel'); let level = ratingSelect.value; alphaGradient(fg); @@ -207,24 +174,24 @@ function compareColors(e) { } function sliderRangeInteraction(value) { - let handleWrap = document.getElementById("alphaSliderHandleWrap"); - let handle = document.getElementById("alphaSliderHandle"); - let backgroundColor = document.getElementById("compareColorTwoInput").value; + let handleWrap = document.getElementById('alphaSliderHandleWrap'); + let handle = document.getElementById('alphaSliderHandle'); + let backgroundColor = document.getElementById('compareColorTwoInput').value; let pos = value / 100; - const colorInput = document.getElementById("compareColorOneInput"); + const colorInput = document.getElementById('compareColorOneInput'); let inputVal = colorInput.value; let newVal = chroma(`${inputVal}`).alpha(pos); if (inputVal.match(/^rgb/)) { - newVal = newVal.css("rgb"); + newVal = newVal.css('rgb'); } colorInput.value = newVal; handleWrap.style.left = `${pos * 100}%`; handle.style.backgroundColor = newVal; - let swatch = document.getElementById("compareColorOne_swatch"); + let swatch = document.getElementById('compareColorOne_swatch'); let blendedValue = alphaBlend(newVal.hex(), backgroundColor); let comparisonValue = pos < 1 ? blendedValue : newVal; @@ -236,7 +203,7 @@ function sliderRangeInteraction(value) { let bg = chroma(backgroundColor); // Get value for the rating level for the report. - let ratingSelect = document.getElementById("complianceLevel"); + let ratingSelect = document.getElementById('complianceLevel'); let level = ratingSelect.value; alphaGradient(fg); @@ -245,10 +212,10 @@ function sliderRangeInteraction(value) { } function alphaGradient(color) { - let grad = document.getElementById("alphaSliderGradient"); - let range = document.getElementById("alphaSliderRange"); - let handle = document.getElementById("alphaSliderHandle"); - let handleWrap = document.getElementById("alphaSliderHandleWrap"); + let grad = document.getElementById('alphaSliderGradient'); + let range = document.getElementById('alphaSliderRange'); + let handle = document.getElementById('alphaSliderHandle'); + let handleWrap = document.getElementById('alphaSliderHandleWrap'); let c = chroma(color).rgb(); let cAlpha = chroma(color).alpha() * 100; @@ -256,10 +223,9 @@ function alphaGradient(color) { let start = `rgba(${c[0]}, ${c[1]}, ${c[2]}, 0)`; let end = `rgba(${c[0]}, ${c[1]}, ${c[2]}, 1)`; - let linearGrad = - "linear-gradient(to right, " + start + " 0%, " + end + " 100%)"; + let linearGrad = 'linear-gradient(to right, ' + start + ' 0%, ' + end + ' 100%)'; - handle.style.backgroundColor = chroma(color).css("rgb"); + handle.style.backgroundColor = chroma(color).css('rgb'); grad.style.backgroundImage = linearGrad; range.value = cAlpha; @@ -272,22 +238,12 @@ window.compareColors = compareColors; window.colorPickerInput = colorPickerInput; window.levelSelect = levelSelect; -document - .getElementById("compareColorOneInput") - .addEventListener("input", compareColors); -document - .getElementById("compareColorTwoInput") - .addEventListener("input", compareColors); -document - .getElementById("compareColorOne_picker") - .addEventListener("input", colorPickerInput); -document - .getElementById("compareColorTwo_picker") - .addEventListener("input", colorPickerInput); -document - .getElementById("complianceLevel") - .addEventListener("change", levelSelect); +document.getElementById('compareColorOneInput').addEventListener('input', compareColors); +document.getElementById('compareColorTwoInput').addEventListener('input', compareColors); +document.getElementById('compareColorOne_picker').addEventListener('input', colorPickerInput); +document.getElementById('compareColorTwo_picker').addEventListener('input', colorPickerInput); +document.getElementById('complianceLevel').addEventListener('change', levelSelect); module.exports = { - compareColors, + compareColors }; diff --git a/docs/ui/src/js/convertColors.js b/docs/ui/src/js/convertColors.js index f2afc4bb..64c173a0 100644 --- a/docs/ui/src/js/convertColors.js +++ b/docs/ui/src/js/convertColors.js @@ -9,20 +9,20 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { round, colorPickerInput } from "./utils"; -import { createTable } from "./createTable"; +import {round, colorPickerInput} from './utils'; +import {createTable} from './createTable'; -const simpleColorConverter = require("simple-color-converter"); +const simpleColorConverter = require('simple-color-converter'); -const chroma = require("chroma-js"); -const { extendChroma } = require("./chroma-plus"); +const chroma = require('chroma-js'); +const {extendChroma} = require('./chroma-plus'); extendChroma(chroma); function convertColor(e) { if (e !== undefined) { // Identify which input is triggered let id = e.target.id; - let swatchId = id.replace("Input", "_swatch"); + let swatchId = id.replace('Input', '_swatch'); let value = e.target.value; // If it's a valid color input, do this stuff... @@ -32,146 +32,80 @@ function convertColor(e) { // Colorize the big swatch let swatch = document.getElementById(swatchId); swatch.style.backgroundColor = chroma(color).hex(); - let dest = document.getElementById("converterOutput"); - dest.innerHTML = " "; + let dest = document.getElementById('converterOutput'); + dest.innerHTML = ' '; // Create table with all conversions - let headers = ["Color space", "Channels", "String format"]; + let headers = ['Color space', 'Channels', 'String format']; let rows = []; - let colorSpaces = [ - "HEX", - "RGB", - "HSL", - "HSV", - "LAB", - "LCH", - "OKLAB", - "OKLCH", - "HSLuv", - "CAM02", - "CAM02p", - "CMYK", - "XYZ", - "Pantone", - ]; + let colorSpaces = ['HEX', 'RGB', 'HSL', 'HSV', 'LAB', 'LCH', 'OKLAB', 'OKLCH', 'HSLuv', 'CAM02', 'CAM02p', 'CMYK', 'XYZ', 'Pantone']; for (let i = 0; i < colorSpaces.length; i++) { let colorChannels, colorChannelLabels, colorString; - if (colorSpaces[i] === "HEX") colorChannels = ""; - if (colorSpaces[i] === "RGB") colorChannels = color.rgb(); - if (colorSpaces[i] === "HSL") + if (colorSpaces[i] === 'HEX') colorChannels = ''; + if (colorSpaces[i] === 'RGB') colorChannels = color.rgb(); + if (colorSpaces[i] === 'HSL') colorChannels = color.hsl().map((c, i) => { if (i > 0) return c * 100; else return c; }); // all channels except hue are percentages - if (colorSpaces[i] === "HSV") + if (colorSpaces[i] === 'HSV') colorChannels = color.hsv().map((c, i) => { if (i > 0) return c * 100; else return c; }); // all channels except hue are percentages - if (colorSpaces[i] === "LAB") colorChannels = color.lab(); - if (colorSpaces[i] === "LCH") colorChannels = color.lch(); - if (colorSpaces[i] === "OKLAB") colorChannels = color.oklab(); - if (colorSpaces[i] === "OKLCH") colorChannels = color.oklch(); - if (colorSpaces[i] === "HSLuv") colorChannels = color.hsluv(); - if (colorSpaces[i] === "CAM02") colorChannels = color.jab(); - if (colorSpaces[i] === "CAM02p") colorChannels = color.jch(); - if (colorSpaces[i] === "CMYK") + if (colorSpaces[i] === 'LAB') colorChannels = color.lab(); + if (colorSpaces[i] === 'LCH') colorChannels = color.lch(); + if (colorSpaces[i] === 'OKLAB') colorChannels = color.oklab(); + if (colorSpaces[i] === 'OKLCH') colorChannels = color.oklch(); + if (colorSpaces[i] === 'HSLuv') colorChannels = color.hsluv(); + if (colorSpaces[i] === 'CAM02') colorChannels = color.jab(); + if (colorSpaces[i] === 'CAM02p') colorChannels = color.jch(); + if (colorSpaces[i] === 'CMYK') colorChannels = color.cmyk().map((c) => { return c * 100; }); - if (colorSpaces[i] === "XYZ") + if (colorSpaces[i] === 'XYZ') colorChannels = Object.values( new simpleColorConverter({ - rgb: { r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2] }, - to: "xyz", - }).color, + rgb: {r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2]}, + to: 'xyz' + }).color ); - if (colorSpaces[i] === "Pantone") + if (colorSpaces[i] === 'Pantone') colorChannels = new simpleColorConverter({ - rgb: { r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2] }, - to: "pantone", + rgb: {r: color.rgb()[0], g: color.rgb()[1], b: color.rgb()[2]}, + to: 'pantone' }).color; - if (colorSpaces[i] === "HEX") colorChannelLabels = ""; - if (colorSpaces[i] === "RGB") colorChannelLabels = ["R", "G", "B"]; - if (colorSpaces[i] === "HSL") colorChannelLabels = ["H", "S", "L"]; - if (colorSpaces[i] === "HSV") colorChannelLabels = ["H", "S", "V"]; - if (colorSpaces[i] === "LAB") colorChannelLabels = ["L", "A", "B"]; - if (colorSpaces[i] === "LCH") colorChannelLabels = ["L", "C", "H"]; - if (colorSpaces[i] === "OKLAB") colorChannelLabels = ["L", "A", "B"]; - if (colorSpaces[i] === "OKLCH") colorChannelLabels = ["L", "C", "H"]; - if (colorSpaces[i] === "HSLuv") - colorChannelLabels = ["H (L)", "S (U)", "L (V)"]; - if (colorSpaces[i] === "CAM02") colorChannelLabels = ["L", "A", "B"]; - if (colorSpaces[i] === "CAM02p") colorChannelLabels = ["L", "C", "H"]; - if (colorSpaces[i] === "CMYK") - colorChannelLabels = ["C", "M", "Y", "K"]; - if (colorSpaces[i] === "XYZ") colorChannelLabels = ["X", "Y", "Z"]; - if (colorSpaces[i] === "Pantone") colorChannelLabels = ""; - - if (colorSpaces[i] === "HEX") colorString = `${color.hex()}`; - if (colorSpaces[i] === "RGB") - colorString = `rgb(${round(colorChannels[0], 2)}, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "HSL") - colorString = `hsl(${round(colorChannels[0], 2)}, ${round( - colorChannels[1], - 2, - )}%, ${round(colorChannels[2], 2)}%)`; - if (colorSpaces[i] === "HSV") - colorString = `hsv(${round(colorChannels[0], 2)}, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "LAB") - colorString = `lab(${round(colorChannels[0], 2)}%, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "LCH") - colorString = `lch(${round(colorChannels[0], 2)}%, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "OKLAB") - colorString = `oklab(${round(colorChannels[0], 2)}%, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "OKLCH") - colorString = `oklch(${round(colorChannels[0], 2)}%, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "HSLuv") - colorString = `hsluv(${round(colorChannels[0], 2)}, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "CAM02") - colorString = `jab(${round(colorChannels[0], 2)}, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "CAM02p") - colorString = `jch(${round(colorChannels[0], 2)}, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "CMYK") - colorString = `cmyk(${round(colorChannels[0], 2)}, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)}, ${round(colorChannels[3], 2)})`; - if (colorSpaces[i] === "XYZ") - colorString = `xyz(${round(colorChannels[0], 2)}, ${round( - colorChannels[1], - 2, - )}, ${round(colorChannels[2], 2)})`; - if (colorSpaces[i] === "Pantone") - colorString = `Pantone ${colorChannels}`; + if (colorSpaces[i] === 'HEX') colorChannelLabels = ''; + if (colorSpaces[i] === 'RGB') colorChannelLabels = ['R', 'G', 'B']; + if (colorSpaces[i] === 'HSL') colorChannelLabels = ['H', 'S', 'L']; + if (colorSpaces[i] === 'HSV') colorChannelLabels = ['H', 'S', 'V']; + if (colorSpaces[i] === 'LAB') colorChannelLabels = ['L', 'A', 'B']; + if (colorSpaces[i] === 'LCH') colorChannelLabels = ['L', 'C', 'H']; + if (colorSpaces[i] === 'OKLAB') colorChannelLabels = ['L', 'A', 'B']; + if (colorSpaces[i] === 'OKLCH') colorChannelLabels = ['L', 'C', 'H']; + if (colorSpaces[i] === 'HSLuv') colorChannelLabels = ['H (L)', 'S (U)', 'L (V)']; + if (colorSpaces[i] === 'CAM02') colorChannelLabels = ['L', 'A', 'B']; + if (colorSpaces[i] === 'CAM02p') colorChannelLabels = ['L', 'C', 'H']; + if (colorSpaces[i] === 'CMYK') colorChannelLabels = ['C', 'M', 'Y', 'K']; + if (colorSpaces[i] === 'XYZ') colorChannelLabels = ['X', 'Y', 'Z']; + if (colorSpaces[i] === 'Pantone') colorChannelLabels = ''; + + if (colorSpaces[i] === 'HEX') colorString = `${color.hex()}`; + if (colorSpaces[i] === 'RGB') colorString = `rgb(${round(colorChannels[0], 2)}, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'HSL') colorString = `hsl(${round(colorChannels[0], 2)}, ${round(colorChannels[1], 2)}%, ${round(colorChannels[2], 2)}%)`; + if (colorSpaces[i] === 'HSV') colorString = `hsv(${round(colorChannels[0], 2)}, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'LAB') colorString = `lab(${round(colorChannels[0], 2)}%, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'LCH') colorString = `lch(${round(colorChannels[0], 2)}%, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'OKLAB') colorString = `oklab(${round(colorChannels[0], 2)}%, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'OKLCH') colorString = `oklch(${round(colorChannels[0], 2)}%, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'HSLuv') colorString = `hsluv(${round(colorChannels[0], 2)}, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'CAM02') colorString = `jab(${round(colorChannels[0], 2)}, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'CAM02p') colorString = `jch(${round(colorChannels[0], 2)}, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'CMYK') colorString = `cmyk(${round(colorChannels[0], 2)}, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)}, ${round(colorChannels[3], 2)})`; + if (colorSpaces[i] === 'XYZ') colorString = `xyz(${round(colorChannels[0], 2)}, ${round(colorChannels[1], 2)}, ${round(colorChannels[2], 2)})`; + if (colorSpaces[i] === 'Pantone') colorString = `Pantone ${colorChannels}`; if (Array.isArray(colorChannels)) { colorChannels = colorChannels.map((c) => { @@ -186,33 +120,29 @@ function convertColor(e) { ${colorChannelLabels[1]}: ${colorChannels[1]}, ${colorChannelLabels[2]}: ${colorChannels[2]}`; } else { - channelsOutput = ""; + channelsOutput = ''; } let rowItem = [ `${colorSpaces[i]}`, // Name `${channelsOutput}`, // Channels - `${colorString}`, // String + `${colorString}` // String ]; rows.push(rowItem); } - createTable(headers, rows, "converterOutput"); + createTable(headers, rows, 'converterOutput'); } } } -document - .getElementById("convertColorOneInput") - .addEventListener("input", convertColor); -document - .getElementById("convertColorOne_picker") - .addEventListener("input", colorPickerInput); +document.getElementById('convertColorOneInput').addEventListener('input', convertColor); +document.getElementById('convertColorOne_picker').addEventListener('input', colorPickerInput); window.convertColor = convertColor; window.colorPickerInput = colorPickerInput; module.exports = { - convertColor, + convertColor }; diff --git a/docs/ui/src/js/create3dModel.js b/docs/ui/src/js/create3dModel.js index 19625ebc..04782283 100644 --- a/docs/ui/src/js/create3dModel.js +++ b/docs/ui/src/js/create3dModel.js @@ -9,22 +9,21 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import d3 from "./d3"; -import Plotly from "plotly.js-dist-min"; -import { getThemeName } from "./getThemeData"; -import { filterNaN, convertToCartesian, getChannelsAndFunction } from "./utils"; +import d3 from './d3'; +import Plotly from 'plotly.js-dist-min'; +import {getThemeName} from './getThemeData'; +import {filterNaN, convertToCartesian, getChannelsAndFunction} from './utils'; -function create3dModel(dest, colorClasses, mode, scaleType = "theme") { +function create3dModel(dest, colorClasses, mode, scaleType = 'theme') { // Force colorClasses to be an array if it was erroneously passed // as a single color class. if (!Array.isArray(colorClasses)) colorClasses = [colorClasses]; // Hide all example images - if (scaleType === "theme") { - let images = document.getElementsByClassName("ModelImage"); + if (scaleType === 'theme') { + let images = document.getElementsByClassName('ModelImage'); for (let i = 0; i < images.length; i++) { - if (!images[i].classList.contains("is-hidden")) - images[i].classList.add("is-hidden"); + if (!images[i].classList.contains('is-hidden')) images[i].classList.add('is-hidden'); } } @@ -49,25 +48,17 @@ function create3dModel(dest, colorClasses, mode, scaleType = "theme") { const colorWay = colorClasses.map((c) => { return c.colorKeys[0]; }); - const mq = window.matchMedia("(prefers-color-scheme: dark)"); - const downloadFileName = - scaleType === "theme" - ? `${getThemeName()}_3dModel` - : `${scaleType}Scale_3dModel`; + const mq = window.matchMedia('(prefers-color-scheme: dark)'); + const downloadFileName = scaleType === 'theme' ? `${getThemeName()}_3dModel` : `${scaleType}Scale_3dModel`; const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; - const height = - dest === "paletteModelWrapper" ? windowHeight - 120 : windowHeight - 260; + const height = dest === 'paletteModelWrapper' ? windowHeight - 120 : windowHeight - 260; let width = windowWidth - (424 + 304 + 32); // Fit to window, minus panel and padding - if ( - dest === "sequentialModelWrapper" || - dest === "tabModelContent" || - dest === "divergingModelWrapper" - ) { + if (dest === 'sequentialModelWrapper' || dest === 'tabModelContent' || dest === 'divergingModelWrapper') { if (width > 796) width = 796; // Max width for scale views of 3d model } - const canvasColor = mq.matches ? "#1d1d1d" : "#f5f5f5"; + const canvasColor = mq.matches ? '#1d1d1d' : '#f5f5f5'; const layout = { colorway: colorWay, @@ -81,7 +72,7 @@ function create3dModel(dest, colorClasses, mode, scaleType = "theme") { r: 24, b: 24, t: 24, - pad: 0, + pad: 0 }, paper_bgcolor: canvasColor, scene: { @@ -89,66 +80,57 @@ function create3dModel(dest, colorClasses, mode, scaleType = "theme") { eye: { x: 1, y: -1, - z: 0.5, // 0.25 + z: 0.5 // 0.25 }, projection: { - type: "orthographic", // 'perspective' or 'orthographic' - }, + type: 'orthographic' // 'perspective' or 'orthographic' + } }, // aspectmode: 'data', // data matches the dataset, cube forces into a cube shape - aspectratio: { x: 1, y: 1, z: 1 }, + aspectratio: {x: 1, y: 1, z: 1}, xaxis: { nticks: 5, - title: "", + title: '', showspikes: false, - showgrid: false, + showgrid: false }, yaxis: { nticks: 5, - title: "", + title: '', showspikes: false, - showgrid: false, + showgrid: false }, zaxis: { nticks: 5, - title: "Luminosity", + title: 'Luminosity', showspikes: false, - showgrid: false, - }, - }, + showgrid: false + } + } }; const config = { toImageButtonOptions: { - format: "svg", // one of png, svg, jpeg, webp + format: 'svg', // one of png, svg, jpeg, webp filename: downloadFileName, height: 700, width: 700, - scale: 1, // Multiply title/legend/axis/canvas sizes by this factor + scale: 1 // Multiply title/legend/axis/canvas sizes by this factor }, displayModeBar: true, - modeBarButtonsToRemove: ["orbitRotation"], + modeBarButtonsToRemove: ['orbitRotation'], displaylogo: false, - responsive: true, + responsive: true }; // Create 3d plot Plotly.newPlot(dest, data, layout, config); // Then, display example image based on the selected mode. - if (scaleType === "theme") { - let modelMode = - mode === "CAM02" - ? "LAB" - : mode === "CAM02p" - ? "LCH" - : mode === "HSLuv" - ? "LUV" - : mode === "OKLCH" - ? "OKLAB" - : mode; + if (scaleType === 'theme') { + let modelMode = mode === 'CAM02' ? 'LAB' : mode === 'CAM02p' ? 'LCH' : mode === 'HSLuv' ? 'LUV' : mode === 'OKLCH' ? 'OKLAB' : mode; let image = document.getElementById(`ModelImage_${modelMode}`); - image.classList.remove("is-hidden"); + image.classList.remove('is-hidden'); } } @@ -159,82 +141,49 @@ function createColorData(colorClasses, mode, scaleType) { let dataArray = []; for (let i = 0; i < colorClasses.length; i++) { - let currentColor = - !scaleType || scaleType === "theme" - ? colorClasses[i].backgroundColorScale - : colorClasses[i].colors; + let currentColor = !scaleType || scaleType === 'theme' ? colorClasses[i].backgroundColorScale : colorClasses[i].colors; let dataA = currentColor.map(function (d) { let channelValue = method(d)[f.c1]; // Need to do some geometry for polar colorspaces - if ( - mode === "CAM02p" || - mode === "LCH" || - mode === "HSL" || - mode === "HSV" || - mode === "HSLuv" || - mode === "OKLCH" - ) { - let s = - mode === "HSL" || mode === "HSV" - ? method(d)[f.c2] * 100 - : mode === "OKLCH" - ? method(d)[f.c2] * 310 - : method(d)[f.c2]; + if (mode === 'CAM02p' || mode === 'LCH' || mode === 'HSL' || mode === 'HSV' || mode === 'HSLuv' || mode === 'OKLCH') { + let s = mode === 'HSL' || mode === 'HSV' ? method(d)[f.c2] * 100 : mode === 'OKLCH' ? method(d)[f.c2] * 310 : method(d)[f.c2]; let h = channelValue; return filterNaN(convertToCartesian(s, h).x); } - if (mode === "OKLAB") return filterNaN(channelValue * 460); + if (mode === 'OKLAB') return filterNaN(channelValue * 460); else return filterNaN(channelValue); }); let dataB = currentColor.map(function (d) { let channelValue = method(d)[f.c3]; - if ( - mode === "HSL" || - mode === "HSV" || - mode === "OKLCH" || - mode === "OKLAB" - ) - channelValue = channelValue * 100; + if (mode === 'HSL' || mode === 'HSV' || mode === 'OKLCH' || mode === 'OKLAB') channelValue = channelValue * 100; return filterNaN(channelValue); }); let dataC = currentColor.map(function (d) { let channelValue = method(d)[f.c2]; // Need to do some geometry for polar colorspaces - if ( - mode === "CAM02p" || - mode === "LCH" || - mode === "HSL" || - mode === "HSV" || - mode === "HSLuv" || - mode === "OKLCH" - ) { - let s = - mode === "HSL" || mode === "HSV" - ? channelValue * 100 - : mode === "OKLCH" - ? channelValue * 310 - : channelValue; + if (mode === 'CAM02p' || mode === 'LCH' || mode === 'HSL' || mode === 'HSV' || mode === 'HSLuv' || mode === 'OKLCH') { + let s = mode === 'HSL' || mode === 'HSV' ? channelValue * 100 : mode === 'OKLCH' ? channelValue * 310 : channelValue; let h = method(d)[f.c1]; return filterNaN(convertToCartesian(s, h).y); } - if (mode === "OKLAB") return filterNaN(channelValue * 460); + if (mode === 'OKLAB') return filterNaN(channelValue * 460); return filterNaN(channelValue); }); let dataObj = { - type: "scatter3d", - mode: "lines", + type: 'scatter3d', + mode: 'lines', x: dataA, y: dataC, z: dataB, name: colorClasses[i].name, opacity: 1, - markercolor: "red", + markercolor: 'red', line: { width: 16, - color: currentColor, - }, + color: currentColor + } }; dataArray.push(dataObj); @@ -258,91 +207,84 @@ function createColorData(colorClasses, mode, scaleType) { function createMinMaxDataForPlot(mode) { let dataArray = []; const markerSize = 1; - const markerColor = "rgba(0, 0, 0, 0)"; + const markerColor = 'rgba(0, 0, 0, 0)'; let dataA, dataB, dataC; - if ( - mode === "CAM02p" || - mode === "LCH" || - mode === "HSL" || - mode === "HSV" || - mode === "HSLuv" || - mode === "OKLCH" - ) { + if (mode === 'CAM02p' || mode === 'LCH' || mode === 'HSL' || mode === 'HSV' || mode === 'HSLuv' || mode === 'OKLCH') { dataA = [0, 100]; dataB = [0, 100]; dataC = [0, -100]; } - if (mode === "LAB") { + if (mode === 'LAB') { dataA = [0, 100]; dataB = [-128, 128]; dataC = [-128, 128]; } - if (mode === "OKLAB") { + if (mode === 'OKLAB') { dataA = [0, 100]; dataB = [-128, 128]; dataC = [-128, 128]; } - if (mode === "CAM02") { + if (mode === 'CAM02') { dataA = [0, 100]; dataB = [-50, 50]; dataC = [-50, 50]; } - if (mode === "RGB") { + if (mode === 'RGB') { dataA = [0, 255]; dataB = [0, 255]; dataC = [0, 255]; } let dataObj1 = { - type: "scatter3d", - mode: "markers", + type: 'scatter3d', + mode: 'markers', x: [0, 0], y: [0, 0], z: dataA, - name: " ", + name: ' ', opacity: 1, markercolor: markerColor, marker: { size: markerSize, - color: markerColor, - }, + color: markerColor + } }; let dataObj2 = { - type: "scatter3d", - mode: "markers", + type: 'scatter3d', + mode: 'markers', x: [0, 0], y: dataB, z: [0, 0], - name: " ", + name: ' ', opacity: 1, markercolor: markerColor, - marker: { size: markerSize, color: markerColor }, + marker: {size: markerSize, color: markerColor} }; let dataObj3 = { - type: "scatter3d", - mode: "markers", + type: 'scatter3d', + mode: 'markers', x: dataB, y: dataC, z: [0, 0], - name: " ", + name: ' ', opacity: 1, markercolor: markerColor, - marker: { size: markerSize, color: markerColor }, + marker: {size: markerSize, color: markerColor} }; let dataObj4 = { - type: "scatter3d", - mode: "markers", + type: 'scatter3d', + mode: 'markers', x: dataC, y: [0, 0], z: [0, 0], - name: " ", + name: ' ', opacity: 1, markercolor: markerColor, - marker: { size: markerSize, color: markerColor }, + marker: {size: markerSize, color: markerColor} }; dataArray.push(dataObj1); @@ -354,5 +296,5 @@ function createMinMaxDataForPlot(mode) { } module.exports = { - create3dModel, + create3dModel }; diff --git a/docs/ui/src/js/createBaseScaleOptions.js b/docs/ui/src/js/createBaseScaleOptions.js index 44c5d900..4f2e3555 100644 --- a/docs/ui/src/js/createBaseScaleOptions.js +++ b/docs/ui/src/js/createBaseScaleOptions.js @@ -9,14 +9,14 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { getAllColorNames, getColorClassByName } from "./getThemeData.js"; -import { createOutputColors } from "./createOutputColors"; -import { createOutputParameters } from "./createOutputParameters"; -import { _theme } from "./initialTheme"; +import {getAllColorNames, getColorClassByName} from './getThemeData.js'; +import {createOutputColors} from './createOutputColors'; +import {createOutputParameters} from './createOutputParameters'; +import {_theme} from './initialTheme'; // Create options for colors to use as base scale function baseScaleOptions() { - let baseSelect = document.getElementById("themeBase"); + let baseSelect = document.getElementById('themeBase'); let colorNames = getAllColorNames(); // Remove all existing options and start from scratch @@ -33,15 +33,12 @@ function baseScaleOptions() { } for (let index in opts) { - baseSelect.options[baseSelect.options.length] = new Option( - opts[index], - index, - ); + baseSelect.options[baseSelect.options.length] = new Option(opts[index], index); } } -let baseSelect = document.getElementById("themeBase"); -baseSelect.addEventListener("change", function (e) { +let baseSelect = document.getElementById('themeBase'); +baseSelect.addEventListener('change', function (e) { let colorName = `${e.target.value}`; let colorClass = getColorClassByName(colorName); _theme.backgroundColor = colorClass; @@ -51,5 +48,5 @@ baseSelect.addEventListener("change", function (e) { }); module.exports = { - baseScaleOptions, + baseScaleOptions }; diff --git a/docs/ui/src/js/createChart.js b/docs/ui/src/js/createChart.js index 44e03532..2c9a6418 100644 --- a/docs/ui/src/js/createChart.js +++ b/docs/ui/src/js/createChart.js @@ -8,22 +8,11 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import * as d3 from "d3"; +import * as d3 from 'd3'; const panelsOffset = 402; // should be 722 ...not 752 -function createChart( - data, - yLabel, - xLabel, - dest, - yMin, - yMax, - finiteScale = false, - visColors, - scaleType, - stepped = false, -) { +function createChart(data, yLabel, xLabel, dest, yMin, yMax, finiteScale = false, visColors, scaleType, stepped = false) { let chartWidth, chartHeight; const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; @@ -31,11 +20,7 @@ function createChart( let adjustedWidth; const maxWidth = 792; - if ( - dest === "#interpolationChart" || - dest === "#interpolationChart2" || - dest === "#interpolationChart3" - ) { + if (dest === '#interpolationChart' || dest === '#interpolationChart2' || dest === '#interpolationChart3') { let availableWidth = windowWidth - panelsOffset; // subtract panel width and padding from measurement let newMaxWidth = 548; //476 adjustedWidth = availableWidth < newMaxWidth ? availableWidth : newMaxWidth; @@ -44,11 +29,7 @@ function createChart( adjustedHeight = (windowHeight - 332) / 3; chartHeight = 178; } - if ( - dest === `#${scaleType}InterpolationChart` || - dest === `#${scaleType}InterpolationChart2` || - dest === `#${scaleType}InterpolationChart3` - ) { + if (dest === `#${scaleType}InterpolationChart` || dest === `#${scaleType}InterpolationChart2` || dest === `#${scaleType}InterpolationChart3`) { let availableWidth = windowWidth - (388 + 34) - 8; // subtract panel width and padding from measurement let newMaxWidth = 476; adjustedWidth = availableWidth < newMaxWidth ? availableWidth : newMaxWidth; @@ -57,46 +38,37 @@ function createChart( adjustedHeight = (windowHeight - 332) / 3; chartHeight = 196; } - if (dest === `#sequentialRGBchart` || dest === "#divergingRGBchart") { + if (dest === `#sequentialRGBchart` || dest === '#divergingRGBchart') { chartWidth = 368; adjustedHeight = (windowHeight - 332) / 3; chartHeight = 196; // 196 } - if (dest === "#RGBchart") { + if (dest === '#RGBchart') { chartWidth = 368; adjustedHeight = (windowHeight - 332) / 3; chartHeight = 216; } - if ( - dest === "#contrastChart" || - dest === "#detailContrastChart" || - dest === "#luminosityChart" || - dest === "#detailLightnessChart" - ) { + if (dest === '#contrastChart' || dest === '#detailContrastChart' || dest === '#luminosityChart' || dest === '#detailLightnessChart') { adjustedWidth = windowWidth - panelsOffset; chartWidth = adjustedWidth < maxWidth ? adjustedWidth : maxWidth; } - if (dest === "#contrastChart" || dest === "#luminosityChart") { + if (dest === '#contrastChart' || dest === '#luminosityChart') { if (windowHeight < 900) chartHeight = windowHeight / 2 - 174; else chartHeight = 300; } - if (dest === "#detailContrastChart" || dest === "#detailLightnessChart") { + if (dest === '#detailContrastChart' || dest === '#detailLightnessChart') { chartHeight = 240; } - let xy_chart = d3_xy_chart() - .width(chartWidth) - .height(chartHeight) - .xlabel(xLabel) - .ylabel(yLabel); + let xy_chart = d3_xy_chart().width(chartWidth).height(chartHeight).xlabel(xLabel).ylabel(yLabel); - let svg = d3.select(dest).append("svg").datum(data).call(xy_chart); + let svg = d3.select(dest).append('svg').datum(data).call(xy_chart); function d3_xy_chart() { let width = chartWidth, height = chartHeight, - xlabel = "X Axis Label", - ylabel = "Y Axis Label"; + xlabel = 'X Axis Label', + ylabel = 'Y Axis Label'; function chart(selection) { selection.each(function (datasets) { @@ -115,18 +87,13 @@ function createChart( // Create the plot. // let marginBottom = 16; - let marginLeft = - dest === `#sequentialRGBchart` || - dest === "#divergingRGBchart" || - dest === "#RGBchart" - ? 0 - : 36; + let marginLeft = dest === `#sequentialRGBchart` || dest === '#divergingRGBchart' || dest === '#RGBchart' ? 0 : 36; let margin = { top: 8, right: 8, bottom: marginBottom, - left: marginLeft, + left: marginLeft }; let innerwidth = width - margin.left - margin.right; @@ -141,19 +108,14 @@ function createChart( }), d3.max(datasets, function (d) { return d3.max(d.x); - }), + }) ]); - let y_scale = d3 - .scaleLinear() - .range([innerheight, 0]) - .domain([yMin, yMax]); + let y_scale = d3.scaleLinear().range([innerheight, 0]).domain([yMin, yMax]); let color_scale; if (!visColors) { - color_scale = d3 - .scaleOrdinal(d3.schemeCategory10) - .domain(d3.range(datasets.length)); + color_scale = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(datasets.length)); } else { color_scale = () => { return visColors; @@ -163,26 +125,22 @@ function createChart( let y_axis = d3.axisLeft(y_scale); - let x_grid = d3 - .axisBottom(x_scale) - .tickSize(-innerheight) - .tickSizeOuter(0) - .tickFormat(""); + let x_grid = d3.axisBottom(x_scale).tickSize(-innerheight).tickSizeOuter(0).tickFormat(''); if (finiteScale) { x_axis.ticks( d3.max(datasets, function (d) { return d3.max(d.x); - }) - 1, + }) - 1 ); x_grid.ticks( d3.max(datasets, function (d) { return d3.max(d.x); - }) - 1, + }) - 1 ); } - let y_grid = d3.axisLeft(y_scale).tickSize(-innerwidth).tickFormat(""); + let y_grid = d3.axisLeft(y_scale).tickSize(-innerwidth).tickFormat(''); let draw_line; if (stepped) @@ -208,101 +166,92 @@ function createChart( let svg = d3 .select(this) - .attr("width", width) - .attr("height", height) - .append("g") - .attr( - "transform", - "translate(" + margin.left + "," + margin.top + ")", - ); + .attr('width', width) + .attr('height', height) + .append('g') + .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); // If dest is RGB chart, don't show ticks - if (dest !== "#RGBchart" || dest !== `#${scaleType}RGBchart`) { + if (dest !== '#RGBchart' || dest !== `#${scaleType}RGBchart`) { svg - .append("g") - .attr("class", "x grid") - .attr("transform", "translate(0," + innerheight + ")") + .append('g') + .attr('class', 'x grid') + .attr('transform', 'translate(0,' + innerheight + ')') .call(x_grid); - svg.append("g").attr("class", "y grid").call(y_grid); + svg.append('g').attr('class', 'y grid').call(y_grid); svg - .append("g") - .attr("class", "x axis") - .attr("transform", "translate(0," + innerheight + ")") + .append('g') + .attr('class', 'x axis') + .attr('transform', 'translate(0,' + innerheight + ')') .call(x_axis) - .append("text") - .attr("dy", "2.5em") - .attr("x", innerwidth / 2) - .style("text-anchor", "middle") + .append('text') + .attr('dy', '2.5em') + .attr('x', innerwidth / 2) + .style('text-anchor', 'middle') .text(xlabel); svg - .append("g") - .attr("class", "y axis") + .append('g') + .attr('class', 'y axis') .call(y_axis) - .append("text") - .attr("transform", "rotate(-90)") - .attr("dy", "-2.25em") - .attr("x", -innerheight / 2) - .style("text-anchor", "middle") + .append('text') + .attr('transform', 'rotate(-90)') + .attr('dy', '-2.25em') + .attr('x', -innerheight / 2) + .style('text-anchor', 'middle') .text(ylabel); } else { svg - .append("g") - .attr("class", "x grid") - .attr("transform", "translate(0," + innerheight + ")") + .append('g') + .attr('class', 'x grid') + .attr('transform', 'translate(0,' + innerheight + ')') .call(x_grid); - svg.append("g").attr("class", "y grid").call(y_grid); + svg.append('g').attr('class', 'y grid').call(y_grid); svg - .append("g") - .attr("class", "x axis") - .attr("transform", "translate(0," + innerheight + ")") + .append('g') + .attr('class', 'x axis') + .attr('transform', 'translate(0,' + innerheight + ')') .call(x_axis); - svg.append("g").attr("class", "y axis").call(y_axis); + svg.append('g').attr('class', 'y axis').call(y_axis); } let data_lines = svg - .selectAll(".d3_xy_chart_line") + .selectAll('.d3_xy_chart_line') .data( datasets.map(function (d) { return d3.zip(d.x, d.y); - }), + }) ) .enter() - .append("g") - .attr("class", "d3_xy_chart_line"); + .append('g') + .attr('class', 'd3_xy_chart_line'); data_lines - .append("path") - .attr("class", "line") - .attr("d", function (d) { + .append('path') + .attr('class', 'line') + .attr('d', function (d) { return draw_line(d); }) - .attr("stroke", function (_, i) { + .attr('stroke', function (_, i) { return color_scale(i); }); data_lines - .append("text") + .append('text') .datum(function (d, i) { - return { name: datasets[i].label, final: d[d.length - 1] }; + return {name: datasets[i].label, final: d[d.length - 1]}; }) - .attr("transform", function (d) { - return ( - "translate(" + - x_scale(d.final[0]) + - "," + - y_scale(d.final[1]) + - ")" - ); + .attr('transform', function (d) { + return 'translate(' + x_scale(d.final[0]) + ',' + y_scale(d.final[1]) + ')'; }) - .attr("x", 3) - .attr("dy", ".35em") - .attr("fill", function (_, i) { + .attr('x', 3) + .attr('dy', '.35em') + .attr('fill', function (_, i) { return color_scale(i); }) .text(function (d) { @@ -339,16 +288,7 @@ function createChart( } } -function createColorChart( - data, - yLabel, - xLabel, - dest, - yMin, - yMax, - colors, - scaleType, -) { +function createColorChart(data, yLabel, xLabel, dest, yMin, yMax, colors, scaleType) { let chartWidth, chartHeight; const windowWidth = window.innerWidth; @@ -357,11 +297,7 @@ function createColorChart( const minWidth = 200; const windowHeight = window.innerHeight; - if ( - dest === `#${scaleType}InterpolationChart` || - dest === `#${scaleType}InterpolationChart2` || - dest === `#${scaleType}InterpolationChart3` - ) { + if (dest === `#${scaleType}InterpolationChart` || dest === `#${scaleType}InterpolationChart2` || dest === `#${scaleType}InterpolationChart3`) { let adjustedWidth = windowWidth - (388 + 34) - 8; // subtract panel width and padding from measurement let newMaxWidth = 476; adjustedWidth = adjustedWidth < newMaxWidth ? adjustedWidth : newMaxWidth; @@ -372,8 +308,7 @@ function createColorChart( } else { let newMaxWidth = 600; let adjustedWidth = windowWidth - 320 - panelsOffset - 48; // subtract panel width and padding from measurement - let newAdjustedWidth = - adjustedWidth < newMaxWidth ? adjustedWidth : newMaxWidth; + let newAdjustedWidth = adjustedWidth < newMaxWidth ? adjustedWidth : newMaxWidth; let minHeight = 196; let dynamicHeight = window.innerHeight / 3 - 80; // subtract heading, tabs height and padding from measurement @@ -387,19 +322,15 @@ function createColorChart( // by setting a min width for hte charts. if (chartWidth < minWidth) chartWidth = minWidth; - let xy_chart = d3_xy_chart() - .width(chartWidth) - .height(chartHeight) - .xlabel(xLabel) - .ylabel(yLabel); + let xy_chart = d3_xy_chart().width(chartWidth).height(chartHeight).xlabel(xLabel).ylabel(yLabel); - let svg = d3.select(dest).append("svg").datum(data).call(xy_chart); + let svg = d3.select(dest).append('svg').datum(data).call(xy_chart); function d3_xy_chart() { let width = chartWidth, height = chartHeight, - xlabel = "X Axis Label", - ylabel = "Y Axis Label"; + xlabel = 'X Axis Label', + ylabel = 'Y Axis Label'; function chart(selection) { selection.each(function (datasets) { @@ -419,20 +350,20 @@ function createColorChart( // let marginBottom; if ( - dest === "#interpolationChart" || - dest === "#interpolationChart2" || - dest === "#interpolationChart3" || + dest === '#interpolationChart' || + dest === '#interpolationChart2' || + dest === '#interpolationChart3' || dest === `#${scaleType}InterpolationChart` || dest === `#${scaleType}InterpolationChart2` || dest === `#${scaleType}InterpolationChart3` || - dest === "#paletteInterpolationChart" || - dest === "#paletteInterpolationChart2" || - dest === "#paletteInterpolationChart3" + dest === '#paletteInterpolationChart' || + dest === '#paletteInterpolationChart2' || + dest === '#paletteInterpolationChart3' ) marginBottom = 16; else marginBottom = 36; - let margin = { top: 8, right: 8, bottom: marginBottom, left: 36 }; + let margin = {top: 8, right: 8, bottom: marginBottom, left: 36}; let innerwidth = width - margin.left - margin.right; let innerheight = height - margin.top - margin.bottom; @@ -446,13 +377,10 @@ function createColorChart( }), d3.max(datasets, function (d) { return d3.max(d.x); - }), + }) ]); - let y_scale = d3 - .scaleLinear() - .range([innerheight, 0]) - .domain([yMin, yMax]); + let y_scale = d3.scaleLinear().range([innerheight, 0]).domain([yMin, yMax]); let color_scale = colors; @@ -460,12 +388,9 @@ function createColorChart( let y_axis = d3.axisLeft(y_scale); - let x_grid = d3 - .axisBottom(x_scale) - .tickSize(-innerheight) - .tickFormat(""); + let x_grid = d3.axisBottom(x_scale).tickSize(-innerheight).tickFormat(''); - let y_grid = d3.axisLeft(y_scale).tickSize(-innerwidth).tickFormat(""); + let y_grid = d3.axisLeft(y_scale).tickSize(-innerwidth).tickFormat(''); let draw_line = d3 .line() @@ -479,68 +404,59 @@ function createColorChart( let svg = d3 .select(this) - .attr("width", width) - .attr("height", height) - .append("g") - .attr( - "transform", - "translate(" + margin.left + "," + margin.top + ")", - ); + .attr('width', width) + .attr('height', height) + .append('g') + .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); svg - .append("g") - .attr("class", "x grid") - .attr("transform", "translate(0," + innerheight + ")") + .append('g') + .attr('class', 'x grid') + .attr('transform', 'translate(0,' + innerheight + ')') .call(x_grid); - svg.append("g").attr("class", "y grid").call(y_grid); + svg.append('g').attr('class', 'y grid').call(y_grid); svg - .append("g") - .attr("class", "x axis") - .attr("transform", "translate(0," + innerheight + ")") + .append('g') + .attr('class', 'x axis') + .attr('transform', 'translate(0,' + innerheight + ')') .call(x_axis); - svg.append("g").attr("class", "y axis").call(y_axis); + svg.append('g').attr('class', 'y axis').call(y_axis); let data_lines = svg - .selectAll(".d3_xy_chart_line") + .selectAll('.d3_xy_chart_line') .data( datasets.map(function (d) { return d3.zip(d.x, d.y); - }), + }) ) .enter() - .append("g") - .attr("class", "d3_xy_chart_line"); + .append('g') + .attr('class', 'd3_xy_chart_line'); data_lines - .append("path") - .attr("class", "line") - .attr("d", function (d) { + .append('path') + .attr('class', 'line') + .attr('d', function (d) { return draw_line(d); }) - .attr("stroke", function (_, i) { + .attr('stroke', function (_, i) { return color_scale[i]; }); data_lines - .append("text") + .append('text') .datum(function (d, i) { - return { name: datasets[i].label, final: d[d.length - 1] }; + return {name: datasets[i].label, final: d[d.length - 1]}; }) - .attr("transform", function (d) { - return ( - "translate(" + - x_scale(d.final[0]) + - "," + - y_scale(d.final[1]) + - ")" - ); + .attr('transform', function (d) { + return 'translate(' + x_scale(d.final[0]) + ',' + y_scale(d.final[1]) + ')'; }) - .attr("x", 3) - .attr("dy", ".35em") - .attr("fill", function (_, i) { + .attr('x', 3) + .attr('dy', '.35em') + .attr('fill', function (_, i) { return color_scale[i]; }) .text(function (d) { @@ -579,5 +495,5 @@ function createColorChart( module.exports = { createChart, - createColorChart, + createColorChart }; diff --git a/docs/ui/src/js/createDemos.js b/docs/ui/src/js/createDemos.js index 6ed212b1..bea9cf7a 100644 --- a/docs/ui/src/js/createDemos.js +++ b/docs/ui/src/js/createDemos.js @@ -9,13 +9,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { heatmap } from "./demos/demo_heatmap"; -import { choropleth } from "./demos/demo_choropleth"; -import { chord } from "./demos/demo_chord"; -import { donut } from "./demos/demo_donut"; -import { stackedArea } from "./demos/demo_stackedArea"; -import { scatter } from "./demos/demo_scatter"; -import { density } from "./demos/demo_density"; +import {heatmap} from './demos/demo_heatmap'; +import {choropleth} from './demos/demo_choropleth'; +import {chord} from './demos/demo_chord'; +import {donut} from './demos/demo_donut'; +import {stackedArea} from './demos/demo_stackedArea'; +import {scatter} from './demos/demo_scatter'; +import {density} from './demos/demo_density'; function createDemos(scaleType, colors) { const destHeatmap = document.getElementById(`${scaleType}Heatmap`); @@ -27,7 +27,7 @@ function createDemos(scaleType, colors) { let dests; - if (scaleType === "qualitative") { + if (scaleType === 'qualitative') { dests = [destChord, destStackedArea, destDonut]; chord(scaleType, colors); @@ -51,5 +51,5 @@ function createDemos(scaleType, colors) { } module.exports = { - createDemos, + createDemos }; diff --git a/docs/ui/src/js/createHtmlElement.js b/docs/ui/src/js/createHtmlElement.js index 58b5bae8..cf24bb8f 100644 --- a/docs/ui/src/js/createHtmlElement.js +++ b/docs/ui/src/js/createHtmlElement.js @@ -9,19 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -function createHtmlElement({ - element, - id, - src, - className, - title, - styles, - type, - innerHTML, - attributes, - eventListeners, - appendTo, -}) { +function createHtmlElement({element, id, src, className, title, styles, type, innerHTML, attributes, eventListeners, appendTo}) { const el = document.createElement(element); if (id) el.id = id; if (className) el.className = className; @@ -49,16 +37,8 @@ function createHtmlElement({ dest.appendChild(el); } -function createSvgElement({ - element, - id, - className, - attributes, - styles, - textContent, - appendTo, -}) { - const svgns = "http://www.w3.org/2000/svg"; +function createSvgElement({element, id, className, attributes, styles, textContent, appendTo}) { + const svgns = 'http://www.w3.org/2000/svg'; const el = document.createElementNS(svgns, element); if (id) el.id = id; if (className) el.className = className; @@ -79,5 +59,5 @@ function createSvgElement({ module.exports = { createHtmlElement, - createSvgElement, + createSvgElement }; diff --git a/docs/ui/src/js/createInterpolationCharts.js b/docs/ui/src/js/createInterpolationCharts.js index d534f740..fa752caf 100644 --- a/docs/ui/src/js/createInterpolationCharts.js +++ b/docs/ui/src/js/createInterpolationCharts.js @@ -9,18 +9,18 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as d3 from "./d3"; -import { createColorChart, createChart } from "./createChart"; -import { filterNaN, getChannelsAndFunction } from "./utils"; -import chroma from "chroma-js"; +import * as d3 from './d3'; +import {createColorChart, createChart} from './createChart'; +import {filterNaN, getChannelsAndFunction} from './utils'; +import chroma from 'chroma-js'; -function createInterpolationCharts(colors, mode, scaleType = "theme") { +function createInterpolationCharts(colors, mode, scaleType = 'theme') { let d1id, d2id, d3id; // colors = colors.map((c) => {return chroma(c)}) - if (scaleType === "theme") { - d1id = "interpolationChart"; - d2id = "interpolationChart2"; - d3id = "interpolationChart3"; + if (scaleType === 'theme') { + d1id = 'interpolationChart'; + d2id = 'interpolationChart2'; + d3id = 'interpolationChart3'; } else { d1id = `${scaleType}InterpolationChart`; d2id = `${scaleType}InterpolationChart2`; @@ -36,27 +36,24 @@ function createInterpolationCharts(colors, mode, scaleType = "theme") { let dest2 = values[1]; let dest3 = values[2]; - dest.innerHTML = " "; - dest2.innerHTML = " "; - dest3.innerHTML = " "; + dest.innerHTML = ' '; + dest2.innerHTML = ' '; + dest3.innerHTML = ' '; // Identify mode channels let colorData = getChannelsAndFunction(mode); // Create chart header - let InterpolationHeader = document.createElement("h5"); - InterpolationHeader.className = - "spectrum-Heading spectrum-Heading--sizeXXS"; + let InterpolationHeader = document.createElement('h5'); + InterpolationHeader.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; InterpolationHeader.innerHTML = `${colorData.c1Label}`; dest.appendChild(InterpolationHeader); - let InterpolationHeader2 = document.createElement("h5"); - InterpolationHeader2.className = - "spectrum-Heading spectrum-Heading--sizeXXS"; + let InterpolationHeader2 = document.createElement('h5'); + InterpolationHeader2.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; InterpolationHeader2.innerHTML = `${colorData.c2Label}`; dest2.appendChild(InterpolationHeader2); - let InterpolationHeader3 = document.createElement("h5"); - InterpolationHeader3.className = - "spectrum-Heading spectrum-Heading--sizeXXS"; + let InterpolationHeader3 = document.createElement('h5'); + InterpolationHeader3.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; InterpolationHeader3.innerHTML = `${colorData.c3Label}`; dest3.appendChild(InterpolationHeader3); @@ -81,7 +78,7 @@ function createInterpolationCharts(colors, mode, scaleType = "theme") { // return filterNaN(d3[func](d)[c3]); }); - if (scaleType === "sequential") { + if (scaleType === 'sequential') { dataX = dataX.sort((a, b) => { return a - b; }); @@ -101,61 +98,28 @@ function createInterpolationCharts(colors, mode, scaleType = "theme") { let dataA = [ { x: dataX, - y: dataYa, - }, + y: dataYa + } ]; let dataB = [ { x: dataX, - y: dataYb, - }, + y: dataYb + } ]; let dataC = [ { x: dataX, - y: dataYc, - }, + y: dataYc + } ]; - let lightnessMax = - mode === "HSL" || mode === "HSV" || mode === "OKLCH" || mode === "OKLAB" - ? 1 - : 100; + let lightnessMax = mode === 'HSL' || mode === 'HSV' || mode === 'OKLCH' || mode === 'OKLAB' ? 1 : 100; - createChart( - dataA, - " ", - " ", - `#${d1id}`, - colorData.yMin, - colorData.yMax, - false, - visColors, - scaleType, - ); - createChart( - dataB, - " ", - " ", - `#${d2id}`, - colorData.yMin2, - colorData.yMax2, - false, - visColors, - scaleType, - ); - createChart( - dataC, - " ", - " ", - `#${d3id}`, - 0, - lightnessMax, - false, - visColors, - scaleType, - ); + createChart(dataA, ' ', ' ', `#${d1id}`, colorData.yMin, colorData.yMax, false, visColors, scaleType); + createChart(dataB, ' ', ' ', `#${d2id}`, colorData.yMin2, colorData.yMax2, false, visColors, scaleType); + createChart(dataC, ' ', ' ', `#${d3id}`, 0, lightnessMax, false, visColors, scaleType); }); } -module.exports = { createInterpolationCharts }; +module.exports = {createInterpolationCharts}; diff --git a/docs/ui/src/js/createOutputColors.js b/docs/ui/src/js/createOutputColors.js index 90419fa4..f6b22a19 100644 --- a/docs/ui/src/js/createOutputColors.js +++ b/docs/ui/src/js/createOutputColors.js @@ -9,33 +9,29 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import d3 from "./d3"; -import { _theme } from "./initialTheme"; -import { round, cssColorToRgb, colorToGrayScale } from "./utils"; +import * as Leo from '@adobe/leonardo-contrast-colors'; +import d3 from './d3'; +import {_theme} from './initialTheme'; +import {round, cssColorToRgb, colorToGrayScale} from './utils'; function createOutputColors(dest) { if (dest) dest = document.getElementById(dest); - let wcagFormula = document.getElementById("themeWCAG").value; - let swatchesOutputs = document.getElementById("swatchesOutputs"); - let themeOutputs = document.getElementById("themeOutputs"); - swatchesOutputs.classList = "hideSwatchLuminosity hideSwatchContrast"; + let wcagFormula = document.getElementById('themeWCAG').value; + let swatchesOutputs = document.getElementById('swatchesOutputs'); + let themeOutputs = document.getElementById('themeOutputs'); + swatchesOutputs.classList = 'hideSwatchLuminosity hideSwatchContrast'; let theme = _theme.contrastColors; let themeBackgroundColor; - if (_theme.output === "RGB" || _theme.output === "HEX") { + if (_theme.output === 'RGB' || _theme.output === 'HEX') { themeBackgroundColor = theme[0].background; } else { // First, make the color an RGB color themeBackgroundColor = cssColorToRgb(theme[0].background); } - let themeBackgroundColorArray = [ - d3.rgb(themeBackgroundColor).r, - d3.rgb(themeBackgroundColor).g, - d3.rgb(themeBackgroundColor).b, - ]; + let themeBackgroundColorArray = [d3.rgb(themeBackgroundColor).r, d3.rgb(themeBackgroundColor).g, d3.rgb(themeBackgroundColor).b]; const backgroundLum = _theme.lightness; let themeColorArray = []; @@ -44,25 +40,24 @@ function createOutputColors(dest) { let destinations = dest ? [dest] : [themeOutputs, swatchesOutputs]; // Iterate each color from theme except 1st object (background) destinations.map((dest) => { - dest.innerHTML = " "; + dest.innerHTML = ' '; // Ignore first theme item (background color) when making swatches for // the Swatch tab. Only create the background color in the Theme preview // Only grab one color (i=1, i<2) to show in UI, which will be turned grayscale let length = dest === swatchesOutputs ? 2 : theme.length; for (let i = dest === swatchesOutputs ? 1 : 0; i < length; i++) { - let wrapper = document.createElement("div"); - wrapper.className = "themeOutputItem"; + let wrapper = document.createElement('div'); + wrapper.className = 'themeOutputItem'; - let swatchWrapper = document.createElement("div"); - swatchWrapper.className = "themeOutputColor"; + let swatchWrapper = document.createElement('div'); + swatchWrapper.className = 'themeOutputColor'; let colorName = theme[i].name; - let outerTextColor = backgroundLum > 50 ? "#000000" : "#ffffff"; + let outerTextColor = backgroundLum > 50 ? '#000000' : '#ffffff'; // Iterate each color value if (theme[i].values) { - let p = document.createElement("p"); - p.className = - "spectrum-Heading spectrum-Heading--sizeXXS themeOutputItem--Heading"; + let p = document.createElement('p'); + p.className = 'spectrum-Heading spectrum-Heading--sizeXXS themeOutputItem--Heading'; p.style.color = outerTextColor; p.innerHTML = theme[i].name; @@ -73,11 +68,11 @@ function createOutputColors(dest) { for (let j = 0; j < theme[i].values.length; j++) { // for each value object let originalValue = theme[i].values[j].value; // output value of color - let formattedName = colorName.replace(/\s+/g, ""); // these names will have had spaces removed already - let swatchName = theme[i].values[j].name.replace(formattedName, ""); + let formattedName = colorName.replace(/\s+/g, ''); // these names will have had spaces removed already + let swatchName = theme[i].values[j].name.replace(formattedName, ''); let colorForTransform; - if (_theme.output === "RGB" || _theme.output === "HEX") { + if (_theme.output === 'RGB' || _theme.output === 'HEX') { colorForTransform = originalValue; } else { // First, make the color an RGB color @@ -86,66 +81,49 @@ function createOutputColors(dest) { let colorValue = colorForTransform; - if (dest === swatchesOutputs) - colorValue = colorToGrayScale(colorForTransform); + if (dest === swatchesOutputs) colorValue = colorToGrayScale(colorForTransform); // get the ratio to print inside the swatch let contrast = theme[i].values[j].contrast; - let colorArray = [ - d3.rgb(colorForTransform).r, - d3.rgb(colorForTransform).g, - d3.rgb(colorForTransform).b, - ]; - let actualContrast = Leo.contrast( - colorArray, - themeBackgroundColorArray, - undefined, - wcagFormula, - ); - - let innerTextColor = - d3.hsluv(colorForTransform).v > 50 ? "#000000" : "#ffffff"; + let colorArray = [d3.rgb(colorForTransform).r, d3.rgb(colorForTransform).g, d3.rgb(colorForTransform).b]; + let actualContrast = Leo.contrast(colorArray, themeBackgroundColorArray, undefined, wcagFormula); + + let innerTextColor = d3.hsluv(colorForTransform).v > 50 ? '#000000' : '#ffffff'; let contrastRounded = Math.round(actualContrast * 100) / 100; - let contrastTextNode = - wcagFormula === "wcag2" ? contrastRounded + " :1" : contrastRounded; + let contrastTextNode = wcagFormula === 'wcag2' ? contrastRounded + ' :1' : contrastRounded; let contrastText = document.createTextNode(contrastTextNode); - let contrastTextSpan = document.createElement("span"); - contrastTextSpan.className = "themeOutputSwatch_contrast"; + let contrastTextSpan = document.createElement('span'); + contrastTextSpan.className = 'themeOutputSwatch_contrast'; contrastTextSpan.appendChild(contrastText); contrastTextSpan.style.color = innerTextColor; let luminosityValue = round(d3.hsluv(colorForTransform).v, 2); - let luminosityText = document.createTextNode(luminosityValue + "%"); - let luminosityTextSpan = document.createElement("span"); - luminosityTextSpan.className = "themeOutputSwatch_luminosity"; + let luminosityText = document.createTextNode(luminosityValue + '%'); + let luminosityTextSpan = document.createElement('span'); + luminosityTextSpan.className = 'themeOutputSwatch_luminosity'; luminosityTextSpan.appendChild(luminosityText); luminosityTextSpan.style.color = innerTextColor; let swatchIndexText = document.createTextNode(swatchName); - let swatchIndexTextSpan = document.createElement("span"); - swatchIndexTextSpan.className = "themeOutputSwatch_index"; + let swatchIndexTextSpan = document.createElement('span'); + swatchIndexTextSpan.className = 'themeOutputSwatch_index'; swatchIndexTextSpan.appendChild(swatchIndexText); swatchIndexTextSpan.style.color = outerTextColor; - let div = document.createElement("div"); - div.className = "themeOutputSwatch"; + let div = document.createElement('div'); + div.className = 'themeOutputSwatch'; if (dest === themeOutputs) { div.title = `Click to copy value ${originalValue}`; // copy text should be for value of original color, not of preview color. - div.setAttribute("data-clipboard-text", originalValue); - div.setAttribute("tabindex", "0"); + div.setAttribute('data-clipboard-text', originalValue); + div.setAttribute('tabindex', '0'); } if (dest !== themeOutputs) { - div.style.cursor = "default"; + div.style.cursor = 'default'; } div.style.backgroundColor = colorValue; - div.style.borderColor = - backgroundLum > 50 && contrast < 3 - ? "rgba(0, 0, 0, 0.2)" - : backgroundLum <= 50 && contrast < 3 - ? " rgba(255, 255, 255, 0.4)" - : "transparent"; + div.style.borderColor = backgroundLum > 50 && contrast < 3 ? 'rgba(0, 0, 0, 0.2)' : backgroundLum <= 50 && contrast < 3 ? ' rgba(255, 255, 255, 0.4)' : 'transparent'; if (dest === themeOutputs) { div.appendChild(swatchIndexTextSpan); @@ -159,18 +137,17 @@ function createOutputColors(dest) { } wrapper.appendChild(swatchWrapper); } else if (theme[i].background && dest === themeOutputs) { - let p = document.createElement("p"); - p.className = - "spectrum-Heading spectrum-Heading--sizeXXS themeOutputItem--Heading"; - p.innerHTML = "Background color"; - p.style.color = backgroundLum > 50 ? "#000000" : "#ffffff"; + let p = document.createElement('p'); + p.className = 'spectrum-Heading spectrum-Heading--sizeXXS themeOutputItem--Heading'; + p.innerHTML = 'Background color'; + p.style.color = backgroundLum > 50 ? '#000000' : '#ffffff'; wrapper.appendChild(p); let originalValue = theme[i].background; // output value of color // set global variable value. Probably shouldn't do it this way. let colorForTransform; - if (_theme.output === "RGB" || _theme.output === "HEX") { + if (_theme.output === 'RGB' || _theme.output === 'HEX') { colorForTransform = originalValue; } else { // First, make the color an RGB color @@ -179,18 +156,13 @@ function createOutputColors(dest) { let colorValue = colorForTransform; - let div = document.createElement("div"); - div.className = "themeOutputSwatch"; + let div = document.createElement('div'); + div.className = 'themeOutputSwatch'; div.title = `Click to copy value ${originalValue}`; - div.setAttribute("tabindex", "0"); - div.setAttribute("data-clipboard-text", originalValue); + div.setAttribute('tabindex', '0'); + div.setAttribute('data-clipboard-text', originalValue); div.style.backgroundColor = colorValue; - div.style.borderColor = - backgroundLum > 50 - ? "rgba(0, 0, 0, 0.2)" - : backgroundLum <= 50 - ? " rgba(255, 255, 255, 0.4)" - : "transparent"; + div.style.borderColor = backgroundLum > 50 ? 'rgba(0, 0, 0, 0.2)' : backgroundLum <= 50 ? ' rgba(255, 255, 255, 0.4)' : 'transparent'; swatchWrapper.appendChild(div); wrapper.appendChild(swatchWrapper); @@ -205,30 +177,26 @@ function createOutputColors(dest) { // Unique values only const colorsForCopy = [...new Set(themeColorArray)]; - let copyThemeColors = document.getElementById("copyThemeColors"); - copyThemeColors.setAttribute("data-clipboard-text", colorsForCopy); + let copyThemeColors = document.getElementById('copyThemeColors'); + copyThemeColors.setAttribute('data-clipboard-text', colorsForCopy); } function createDetailOutputColors(colorName) { - let wcagFormula = document.getElementById("themeWCAG").value; - let swatchesOutputs = document.getElementById("detailSwatchesOutputs"); - if (swatchesOutputs) swatchesOutputs.innerHTML = " "; + let wcagFormula = document.getElementById('themeWCAG').value; + let swatchesOutputs = document.getElementById('detailSwatchesOutputs'); + if (swatchesOutputs) swatchesOutputs.innerHTML = ' '; let dest = swatchesOutputs; let theme = _theme.contrastColors; let themeBackgroundColor; - if (_theme.output === "RGB" || _theme.output === "HEX") { + if (_theme.output === 'RGB' || _theme.output === 'HEX') { themeBackgroundColor = theme[0].background; } else { // First, make the color an RGB color themeBackgroundColor = cssColorToRgb(theme[0].background); } - let themeBackgroundColorArray = [ - d3.rgb(themeBackgroundColor).r, - d3.rgb(themeBackgroundColor).g, - d3.rgb(themeBackgroundColor).b, - ]; + let themeBackgroundColorArray = [d3.rgb(themeBackgroundColor).r, d3.rgb(themeBackgroundColor).g, d3.rgb(themeBackgroundColor).b]; const backgroundLum = _theme.lightness; // Rather than looping for each color in the theme, find only the @@ -238,17 +206,16 @@ function createDetailOutputColors(colorName) { }); colorOutput = colorOutput[0]; - let wrapper = document.createElement("div"); - wrapper.className = "themeOutputItem"; + let wrapper = document.createElement('div'); + wrapper.className = 'themeOutputItem'; - let swatchWrapper = document.createElement("div"); - swatchWrapper.className = "themeOutputColor"; - let outerTextColor = backgroundLum > 50 ? "#000000" : "#ffffff"; + let swatchWrapper = document.createElement('div'); + swatchWrapper.className = 'themeOutputColor'; + let outerTextColor = backgroundLum > 50 ? '#000000' : '#ffffff'; // Iterate each color value // if (colorOutput.values) { - let p = document.createElement("p"); - p.className = - "spectrum-Heading spectrum-Heading--sizeXXS themeOutputItem--Heading"; + let p = document.createElement('p'); + p.className = 'spectrum-Heading spectrum-Heading--sizeXXS themeOutputItem--Heading'; p.style.color = outerTextColor; p.innerHTML = colorOutput.name; @@ -259,11 +226,11 @@ function createDetailOutputColors(colorName) { for (let j = 0; j < colorOutput.values.length; j++) { // for each value object let originalValue = colorOutput.values[j].value; // output value of color - let formattedName = colorName.replace(/\s+/g, ""); // these names will have had spaces removed already - let swatchName = colorOutput.values[j].name.replace(formattedName, ""); + let formattedName = colorName.replace(/\s+/g, ''); // these names will have had spaces removed already + let swatchName = colorOutput.values[j].name.replace(formattedName, ''); let colorForTransform; - if (_theme.output === "RGB" || _theme.output === "HEX") { + if (_theme.output === 'RGB' || _theme.output === 'HEX') { colorForTransform = originalValue; } else { // First, make the color an RGB color @@ -276,54 +243,38 @@ function createDetailOutputColors(colorName) { // get the ratio to print inside the swatch let contrast = colorOutput.values[j].contrast; - let colorArray = [ - d3.rgb(colorForTransform).r, - d3.rgb(colorForTransform).g, - d3.rgb(colorForTransform).b, - ]; - let actualContrast = Leo.contrast( - colorArray, - themeBackgroundColorArray, - undefined, - wcagFormula, - ); - - let innerTextColor = - d3.hsluv(colorForTransform).v > 50 ? "#000000" : "#ffffff"; + let colorArray = [d3.rgb(colorForTransform).r, d3.rgb(colorForTransform).g, d3.rgb(colorForTransform).b]; + let actualContrast = Leo.contrast(colorArray, themeBackgroundColorArray, undefined, wcagFormula); + + let innerTextColor = d3.hsluv(colorForTransform).v > 50 ? '#000000' : '#ffffff'; let contrastRounded = Math.round(actualContrast * 100) / 100; - let contrastTextNode = - wcagFormula === "wcag2" ? contrastRounded + " :1" : contrastRounded; + let contrastTextNode = wcagFormula === 'wcag2' ? contrastRounded + ' :1' : contrastRounded; let contrastText = document.createTextNode(contrastTextNode); - let contrastTextSpan = document.createElement("span"); - contrastTextSpan.className = "themeOutputSwatch_contrast"; + let contrastTextSpan = document.createElement('span'); + contrastTextSpan.className = 'themeOutputSwatch_contrast'; contrastTextSpan.appendChild(contrastText); contrastTextSpan.style.color = innerTextColor; let luminosityValue = round(d3.hsluv(colorForTransform).v, 2); - let luminosityText = document.createTextNode(luminosityValue + "%"); - let luminosityTextSpan = document.createElement("span"); - luminosityTextSpan.className = "themeOutputSwatch_luminosity"; + let luminosityText = document.createTextNode(luminosityValue + '%'); + let luminosityTextSpan = document.createElement('span'); + luminosityTextSpan.className = 'themeOutputSwatch_luminosity'; luminosityTextSpan.appendChild(luminosityText); luminosityTextSpan.style.color = innerTextColor; let swatchIndexText = document.createTextNode(swatchName); - let swatchIndexTextSpan = document.createElement("span"); - swatchIndexTextSpan.className = "themeOutputSwatch_index"; + let swatchIndexTextSpan = document.createElement('span'); + swatchIndexTextSpan.className = 'themeOutputSwatch_index'; swatchIndexTextSpan.appendChild(swatchIndexText); swatchIndexTextSpan.style.color = outerTextColor; - let div = document.createElement("div"); - div.className = "themeOutputSwatch"; + let div = document.createElement('div'); + div.className = 'themeOutputSwatch'; // copy text should be for value of original color, not of preview color. - div.setAttribute("data-clipboard-text", originalValue); - div.setAttribute("tabindex", "0"); + div.setAttribute('data-clipboard-text', originalValue); + div.setAttribute('tabindex', '0'); div.style.backgroundColor = colorValue; - div.style.borderColor = - backgroundLum > 50 && contrast < 3 - ? "rgba(0, 0, 0, 0.2)" - : backgroundLum <= 50 && contrast < 3 - ? " rgba(255, 255, 255, 0.4)" - : "transparent"; + div.style.borderColor = backgroundLum > 50 && contrast < 3 ? 'rgba(0, 0, 0, 0.2)' : backgroundLum <= 50 && contrast < 3 ? ' rgba(255, 255, 255, 0.4)' : 'transparent'; if (dest === themeOutputs) { div.appendChild(swatchIndexTextSpan); @@ -341,5 +292,5 @@ function createDetailOutputColors(colorName) { module.exports = { createOutputColors, - createDetailOutputColors, + createDetailOutputColors }; diff --git a/docs/ui/src/js/createOutputParameters.js b/docs/ui/src/js/createOutputParameters.js index 8f7242f7..c653adcb 100644 --- a/docs/ui/src/js/createOutputParameters.js +++ b/docs/ui/src/js/createOutputParameters.js @@ -9,16 +9,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { _theme } from "./initialTheme"; -import { getAllColorNames, getThemeName } from "./getThemeData"; -import { camelCase } from "./utils"; -import hljs from "highlight.js/lib/core"; -import javascript from "highlight.js/lib/languages/javascript"; -import css from "highlight.js/lib/languages/css"; -hljs.registerLanguage("javascript", javascript); -hljs.registerLanguage("css", css); +import {_theme} from './initialTheme'; +import {getAllColorNames, getThemeName} from './getThemeData'; +import {camelCase} from './utils'; +import hljs from 'highlight.js/lib/core'; +import javascript from 'highlight.js/lib/languages/javascript'; +import css from 'highlight.js/lib/languages/css'; +hljs.registerLanguage('javascript', javascript); +hljs.registerLanguage('css', css); -const outputFormatPicker = document.getElementById("colorOutputFormat"); +const outputFormatPicker = document.getElementById('colorOutputFormat'); function createOutputParameters() { const outputFormat = outputFormatPicker.value; @@ -31,15 +31,15 @@ function createOutputParameters() { // Reset to hex so all other functions of the UI continue to work. // Otherwise CSS Module 4 formatted colors won't be parsed by Chroma.js - _theme.output = "HEX"; + _theme.output = 'HEX'; }); } function createJSOutput() { - let paramsOutput = document.getElementById("themeJSParams"); + let paramsOutput = document.getElementById('themeJSParams'); let themeName = getThemeName(); - if (!themeName) themeName = "myTheme"; + if (!themeName) themeName = 'myTheme'; let colors = _theme.colors; let colorNames = getAllColorNames(); let colorDeclarations = []; @@ -59,7 +59,7 @@ function createJSOutput() { let paramOutputString = `${joinedDeclarations} -let ${themeName.replace(/\s/g, "")} = new Leo.Theme({ +let ${themeName.replace(/\s/g, '')} = new Leo.Theme({ colors: [${colorNames.map((n) => camelCase(n))}], backgroundColor: ${camelCase(_theme.backgroundColor.name)}, lightness: ${_theme.lightness}, @@ -70,17 +70,17 @@ let ${themeName.replace(/\s/g, "")} = new Leo.Theme({ });`; const highlightedCode = hljs.highlight(paramOutputString, { - language: "javascript", + language: 'javascript' }).value; paramsOutput.innerHTML = highlightedCode; } function createCSSOutput() { let themeName = getThemeName(); - let themeCssClass = `.${themeName.replace(/\s/g, "")}`; - if (!themeName) themeCssClass = ":root"; + let themeCssClass = `.${themeName.replace(/\s/g, '')}`; + if (!themeName) themeCssClass = ':root'; - let paramsOutput = document.getElementById("themeCSSParams"); + let paramsOutput = document.getElementById('themeCSSParams'); let contrastPairs = _theme.contrastColorPairs; let declarations = []; @@ -93,76 +93,65 @@ ${joinedDeclarations} }`; const highlightedCode = hljs.highlight(paramOutputString, { - language: "css", + language: 'css' }).value; paramsOutput.innerHTML = highlightedCode; } function createTokensOutput() { - let paramsOutput = document.getElementById("themeTokensParams"); + let paramsOutput = document.getElementById('themeTokensParams'); let themeName = getThemeName(); let themeObj = {}; - let contrastText = - _theme.contrast != 1 ? `, contrast of ${_theme.contrast * 100}%` : ""; - let saturationText = - _theme.saturation != 100 ? `, saturation of ${_theme.saturation}%` : ""; - themeObj["description"] = - `Color theme tokens at lightness of ${_theme.lightness}%${contrastText}${saturationText}`; + let contrastText = _theme.contrast != 1 ? `, contrast of ${_theme.contrast * 100}%` : ''; + let saturationText = _theme.saturation != 100 ? `, saturation of ${_theme.saturation}%` : ''; + themeObj['description'] = `Color theme tokens at lightness of ${_theme.lightness}%${contrastText}${saturationText}`; - const textLowContrast = "Do not use for UI elements or text."; - const textLarge = "Color can be used for UI elements or large text."; - const textSmall = "Color can be used for small text."; + const textLowContrast = 'Do not use for UI elements or text.'; + const textLarge = 'Color can be used for UI elements or large text.'; + const textSmall = 'Color can be used for small text.'; let contrastColors = _theme.contrastColors; let backgroundColor = _theme.contrastColors[0].background; let backgroundColorObj = { value: backgroundColor, - type: "color", - description: `UI background color. All color contrasts evaluated and generated against this color.`, + type: 'color', + description: `UI background color. All color contrasts evaluated and generated against this color.` }; - themeObj["Background"] = backgroundColorObj; + themeObj['Background'] = backgroundColorObj; - let formulaString = - _theme.formula === "wcag2" - ? "WCAG 2.x (relative luminance)" - : "WCAG 3 (APCA)"; - let largeText = _theme.formula === "wcag3" ? 60 : 3; - let smallText = _theme.formula === "wcag3" ? 75 : 4.5; + let formulaString = _theme.formula === 'wcag2' ? 'WCAG 2.x (relative luminance)' : 'WCAG 3 (APCA)'; + let largeText = _theme.formula === 'wcag3' ? 60 : 3; + let smallText = _theme.formula === 'wcag3' ? 75 : 4.5; for (let i = 1; i < contrastColors.length; i++) { let thisColor = contrastColors[i]; for (let j = 0; j < thisColor.values.length; j++) { let color = thisColor.values[j]; - let descriptionText = - color.contrast < largeText - ? textLowContrast - : color.contrast >= largeText && color.contrast < smallText - ? textLarge - : textSmall; + let descriptionText = color.contrast < largeText ? textLowContrast : color.contrast >= largeText && color.contrast < smallText ? textLarge : textSmall; let colorObj = { value: color.value, - type: "color", - description: `${descriptionText} ${formulaString} contrast is ${color.contrast}:1 against background ${backgroundColor}`, + type: 'color', + description: `${descriptionText} ${formulaString} contrast is ${color.contrast}:1 against background ${backgroundColor}` }; themeObj[color.name] = colorObj; } } let tokenObj = { - [themeName]: themeObj, + [themeName]: themeObj }; const highlightedCode = hljs.highlight(JSON.stringify(tokenObj, null, 2), { - language: "javascript", + language: 'javascript' }).value; paramsOutput.innerHTML = highlightedCode; } -outputFormatPicker.addEventListener("change", createOutputParameters); +outputFormatPicker.addEventListener('change', createOutputParameters); createOutputParameters(); module.exports = { - createOutputParameters, + createOutputParameters }; diff --git a/docs/ui/src/js/createPaletteCharts.js b/docs/ui/src/js/createPaletteCharts.js index 624dbc3e..1a462305 100644 --- a/docs/ui/src/js/createPaletteCharts.js +++ b/docs/ui/src/js/createPaletteCharts.js @@ -9,45 +9,45 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as d3 from "./d3"; -import { _theme } from "./initialTheme"; -import { createScale } from "@adobe/leonardo-contrast-colors"; -import { createColorChart } from "./createChart"; -import { filterNaN, getChannelsAndFunction } from "./utils"; +import * as d3 from './d3'; +import {_theme} from './initialTheme'; +import {createScale} from '@adobe/leonardo-contrast-colors'; +import {createColorChart} from './createChart'; +import {filterNaN, getChannelsAndFunction} from './utils'; -function createPaletteInterpolationCharts(colors, mode, scaleType = "theme") { +function createPaletteInterpolationCharts(colors, mode, scaleType = 'theme') { let d1id, d2id, d3id; - if (scaleType === "theme") { - d1id = "paletteInterpolationChart"; - d2id = "paletteInterpolationChart2"; - d3id = "paletteInterpolationChart3"; + if (scaleType === 'theme') { + d1id = 'paletteInterpolationChart'; + d2id = 'paletteInterpolationChart2'; + d3id = 'paletteInterpolationChart3'; } else { d1id = `${scaleType}InterpolationChart`; d2id = `${scaleType}InterpolationChart2`; d3id = `${scaleType}InterpolationChart3`; } let dest = document.getElementById(d1id); - dest.innerHTML = " "; + dest.innerHTML = ' '; let dest2 = document.getElementById(d2id); - dest2.innerHTML = " "; + dest2.innerHTML = ' '; let dest3 = document.getElementById(d3id); - dest3.innerHTML = " "; + dest3.innerHTML = ' '; let colorData = getChannelsAndFunction(mode); // Create chart header - let InterpolationHeader = document.createElement("h5"); - InterpolationHeader.className = "spectrum-Heading spectrum-Heading--sizeXXS"; + let InterpolationHeader = document.createElement('h5'); + InterpolationHeader.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; InterpolationHeader.innerHTML = `${colorData.c1Label}`; dest.appendChild(InterpolationHeader); - let InterpolationHeader2 = document.createElement("h5"); - InterpolationHeader2.className = "spectrum-Heading spectrum-Heading--sizeXXS"; + let InterpolationHeader2 = document.createElement('h5'); + InterpolationHeader2.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; InterpolationHeader2.innerHTML = `${colorData.c2Label}`; dest2.appendChild(InterpolationHeader2); - let InterpolationHeader3 = document.createElement("h5"); - InterpolationHeader3.className = "spectrum-Heading spectrum-Heading--sizeXXS"; + let InterpolationHeader3 = document.createElement('h5'); + InterpolationHeader3.className = 'spectrum-Heading spectrum-Heading--sizeXXS'; InterpolationHeader3.innerHTML = `${colorData.c3Label}`; dest3.appendChild(InterpolationHeader3); @@ -60,11 +60,9 @@ function createPaletteInterpolationCharts(colors, mode, scaleType = "theme") { let fillRangeStart, fillRangeEnd; let dataA = colors.map((color, index) => { - if (scaleType === "diverging") { - fillRangeStart = - index < 1 ? index * color.length + 1 : index * color.length; - fillRangeEnd = - index < 1 ? (index + 1) * color.length + 1 : (index + 1) * color.length; + if (scaleType === 'diverging') { + fillRangeStart = index < 1 ? index * color.length + 1 : index * color.length; + fillRangeEnd = index < 1 ? (index + 1) * color.length + 1 : (index + 1) * color.length; } else { fillRangeStart = 1; fillRangeEnd = color.length + 1; @@ -76,15 +74,13 @@ function createPaletteInterpolationCharts(colors, mode, scaleType = "theme") { x: sortedDataX, y: color.map(function (d) { return filterNaN(chroma(d)[colorData.func]()[colorData.c1]); - }), + }) }; }); let dataB = colors.map((color, index) => { - if (scaleType === "diverging") { - fillRangeStart = - index < 1 ? index * color.length + 1 : index * color.length; - fillRangeEnd = - index < 1 ? (index + 1) * color.length + 1 : (index + 1) * color.length; + if (scaleType === 'diverging') { + fillRangeStart = index < 1 ? index * color.length + 1 : index * color.length; + fillRangeEnd = index < 1 ? (index + 1) * color.length + 1 : (index + 1) * color.length; } else { fillRangeStart = 1; fillRangeEnd = color.length + 1; @@ -96,15 +92,13 @@ function createPaletteInterpolationCharts(colors, mode, scaleType = "theme") { x: sortedDataX, y: color.map(function (d) { return filterNaN(chroma(d)[colorData.func]()[colorData.c2]); - }), + }) }; }); let dataC = colors.map((color, index) => { - if (scaleType === "diverging") { - fillRangeStart = - index < 1 ? index * color.length + 1 : index * color.length; - fillRangeEnd = - index < 1 ? (index + 1) * color.length + 1 : (index + 1) * color.length; + if (scaleType === 'diverging') { + fillRangeStart = index < 1 ? index * color.length + 1 : index * color.length; + fillRangeEnd = index < 1 ? (index + 1) * color.length + 1 : (index + 1) * color.length; } else { fillRangeStart = 1; fillRangeEnd = color.length + 1; @@ -116,7 +110,7 @@ function createPaletteInterpolationCharts(colors, mode, scaleType = "theme") { x: sortedDataX, y: color.map(function (d) { return filterNaN(chroma(d)[colorData.func]()[colorData.c3]); - }), + }) }; }); @@ -124,44 +118,14 @@ function createPaletteInterpolationCharts(colors, mode, scaleType = "theme") { return color[14]; }); - let lightnessMax = - mode === "HSL" || mode === "HSV" || mode === "OKLCH" || mode === "OKLAB" - ? 1 - : 100; - - createColorChart( - dataA, - " ", - " ", - `#${d1id}`, - colorData.yMin, - colorData.yMax, - visColors, - scaleType, - ); - createColorChart( - dataB, - " ", - " ", - `#${d2id}`, - colorData.yMin2, - colorData.yMax2, - visColors, - scaleType, - ); - createColorChart( - dataC, - " ", - " ", - `#${d3id}`, - 0, - lightnessMax, - visColors, - scaleType, - ); + let lightnessMax = mode === 'HSL' || mode === 'HSV' || mode === 'OKLCH' || mode === 'OKLAB' ? 1 : 100; + + createColorChart(dataA, ' ', ' ', `#${d1id}`, colorData.yMin, colorData.yMax, visColors, scaleType); + createColorChart(dataB, ' ', ' ', `#${d2id}`, colorData.yMin2, colorData.yMax2, visColors, scaleType); + createColorChart(dataC, ' ', ' ', `#${d3id}`, 0, lightnessMax, visColors, scaleType); } -const modePicker = document.getElementById("chartsMode"); +const modePicker = document.getElementById('chartsMode'); function createPaletteCharts(mode) { const colorClasses = _theme.colors; @@ -170,13 +134,13 @@ function createPaletteCharts(mode) { swatches: 31, colorKeys: c.colorKeys, colorspace: c.colorspace, - smooth: c.smooth, + smooth: c.smooth }); }); // Artificially add black because it's missing... let colorsCorrected = colors.map((color) => { - return [...color, "#000000"]; + return [...color, '#000000']; }); createPaletteInterpolationCharts(colorsCorrected, mode); @@ -187,12 +151,12 @@ if (modePicker) { createPaletteCharts(modePicker.value); }; - modePicker.addEventListener("change", (e) => { + modePicker.addEventListener('change', (e) => { createPaletteCharts(e.target.value); }); } module.exports = { createPaletteCharts, - createPaletteInterpolationCharts, + createPaletteInterpolationCharts }; diff --git a/docs/ui/src/js/createPanelReportTable.js b/docs/ui/src/js/createPanelReportTable.js index 452c16ed..fc0cf530 100644 --- a/docs/ui/src/js/createPanelReportTable.js +++ b/docs/ui/src/js/createPanelReportTable.js @@ -9,24 +9,19 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import { createTable } from "./createTable"; -import { round, getDifference } from "./utils"; -const chroma = require("chroma-js"); +import * as Leo from '@adobe/leonardo-contrast-colors'; +import {createTable} from './createTable'; +import {round, getDifference} from './utils'; +const chroma = require('chroma-js'); function createPanelReportTable(colors, background, scaleType, level) { if (!colors) { - const colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; + const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; let scaleColors = colorClass.colors; - if (scaleType === "sequential") { + if (scaleType === 'sequential') { colors = [scaleColors[0], scaleColors[scaleColors.length - 1]]; } else { - colors = [ - scaleColors[0], - colorClass.middleKey, - scaleColors[scaleColors.length - 1], - ]; + colors = [scaleColors[0], colorClass.middleKey, scaleColors[scaleColors.length - 1]]; } } if (!background) { @@ -39,18 +34,12 @@ function createPanelReportTable(colors, background, scaleType, level) { let bgArray = chroma(background).rgb(); const minimumThreshold = 11; - const WCAGmin = level === "AA" ? 3 : 4.5; + const WCAGmin = level === 'AA' ? 3 : 4.5; let reportWrapper = document.getElementById(`${scaleType}_a11yTable`); - reportWrapper.innerHTML = " "; - - let headers = [ - "Compared colors", - "Preview", - "Status", - "Contrast", - "Color difference", - ]; + reportWrapper.innerHTML = ' '; + + let headers = ['Compared colors', 'Preview', 'Status', 'Contrast', 'Color difference']; let rows = []; for (let i = 0; i < colors.length; i++) { @@ -61,19 +50,17 @@ function createPanelReportTable(colors, background, scaleType, level) { let deltaE = getDifference(colors[i], background); let meterPercent = round(deltaE, 2); - let uiClass = - contrast < WCAGmin || deltaE < minimumThreshold ? "negative" : "positive"; - let uiStatus = - contrast < WCAGmin || deltaE < minimumThreshold ? "Fail" : "Pass"; + let uiClass = contrast < WCAGmin || deltaE < minimumThreshold ? 'negative' : 'positive'; + let uiStatus = contrast < WCAGmin || deltaE < minimumThreshold ? 'Fail' : 'Pass'; - let meterClass = deltaE < minimumThreshold ? "is-negative" : "is-positive"; + let meterClass = deltaE < minimumThreshold ? 'is-negative' : 'is-positive'; let color1; - if (scaleType === "sequential") { - color1 = i === 0 ? "Start color" : "End color"; + if (scaleType === 'sequential') { + color1 = i === 0 ? 'Start color' : 'End color'; } else { - color1 = i === 0 ? "Start color" : i === 1 ? "Middle color" : "End color"; + color1 = i === 0 ? 'Start color' : i === 1 ? 'Middle color' : 'End color'; } - let color2 = "Background"; + let color2 = 'Background'; let rowItem = [ `${color1} vs ${color2}`, @@ -82,10 +69,7 @@ function createPanelReportTable(colors, background, scaleType, level) {
`, `${uiStatus}`, - `${round( - contrast, - 2, - )}:1`, + `${round(contrast, 2)}:1`, `
Delta E
@@ -94,13 +78,13 @@ function createPanelReportTable(colors, background, scaleType, level) {
- `, + ` ]; rows.push(rowItem); } // Duplicate same process against the two input colors themselves... - if (scaleType === "sequential") { + if (scaleType === 'sequential') { let fgArray = chroma(colors[0]).rgb(); let altArray = chroma(colors[1]).rgb(); let contrast = Leo.contrast(fgArray, altArray); @@ -108,14 +92,12 @@ function createPanelReportTable(colors, background, scaleType, level) { let deltaE = getDifference(colors[0], colors[1]); let meterPercent = round(deltaE, 2); - let meterClass = deltaE < minimumThreshold ? "is-negative" : "is-positive"; + let meterClass = deltaE < minimumThreshold ? 'is-negative' : 'is-positive'; - let uiClass = - contrast < WCAGmin || deltaE < minimumThreshold ? "negative" : "positive"; - let uiStatus = - contrast < WCAGmin || deltaE < minimumThreshold ? "Fail" : "Pass"; - let color1 = "Start color"; - let color2 = "End color"; + let uiClass = contrast < WCAGmin || deltaE < minimumThreshold ? 'negative' : 'positive'; + let uiStatus = contrast < WCAGmin || deltaE < minimumThreshold ? 'Fail' : 'Pass'; + let color1 = 'Start color'; + let color2 = 'End color'; let rowItem = [ `${color1} vs ${color2}`, @@ -124,10 +106,7 @@ function createPanelReportTable(colors, background, scaleType, level) {
`, `${uiStatus}`, - `${round( - contrast, - 2, - )}:1`, + `${round(contrast, 2)}:1`, `
Delta E
@@ -136,11 +115,11 @@ function createPanelReportTable(colors, background, scaleType, level) {
- `, + ` ]; rows.push(rowItem); } - if (scaleType === "diverging") { + if (scaleType === 'diverging') { let color1Array = chroma(colors[0]).rgb(); let color2Array = chroma(colors[1]).rgb(); let color3Array = chroma(colors[2]).rgb(); @@ -153,26 +132,16 @@ function createPanelReportTable(colors, background, scaleType, level) { let deltaE2 = getDifference(colors[1], colors[2]); let meterPercent1 = round(deltaE1, 2); let meterPercent2 = round(deltaE2, 2); - let meterClass1 = - deltaE1 < minimumThreshold ? "is-negative" : "is-positive"; - let meterClass2 = - deltaE1 < minimumThreshold ? "is-negative" : "is-positive"; - - let uiClass1 = - contrast1 < WCAGmin || deltaE1 < minimumThreshold - ? "negative" - : "positive"; - let uiClass2 = - contrast2 < WCAGmin || deltaE2 < minimumThreshold - ? "negative" - : "positive"; - let uiStatus1 = - contrast1 < WCAGmin || deltaE1 < minimumThreshold ? "Fail" : "Pass"; - let uiStatus2 = - contrast2 < WCAGmin || deltaE2 < minimumThreshold ? "Fail" : "Pass"; - let color1 = "Start color"; - let color2 = "Middle color"; - let color3 = "End color"; + let meterClass1 = deltaE1 < minimumThreshold ? 'is-negative' : 'is-positive'; + let meterClass2 = deltaE1 < minimumThreshold ? 'is-negative' : 'is-positive'; + + let uiClass1 = contrast1 < WCAGmin || deltaE1 < minimumThreshold ? 'negative' : 'positive'; + let uiClass2 = contrast2 < WCAGmin || deltaE2 < minimumThreshold ? 'negative' : 'positive'; + let uiStatus1 = contrast1 < WCAGmin || deltaE1 < minimumThreshold ? 'Fail' : 'Pass'; + let uiStatus2 = contrast2 < WCAGmin || deltaE2 < minimumThreshold ? 'Fail' : 'Pass'; + let color1 = 'Start color'; + let color2 = 'Middle color'; + let color3 = 'End color'; let rowItem1 = [ `${color1} vs ${color2}`, @@ -181,10 +150,7 @@ function createPanelReportTable(colors, background, scaleType, level) {
`, `${uiStatus1}`, - `${round( - contrast1, - 2, - )}:1`, + `${round(contrast1, 2)}:1`, `
Delta E
@@ -193,7 +159,7 @@ function createPanelReportTable(colors, background, scaleType, level) {
- `, + ` ]; let rowItem2 = [ `${color2} vs ${color3}`, @@ -202,10 +168,7 @@ function createPanelReportTable(colors, background, scaleType, level) {
`, `${uiStatus2}`, - `${round( - contrast2, - 2, - )}:1`, + `${round(contrast2, 2)}:1`, `
Delta E
@@ -214,7 +177,7 @@ function createPanelReportTable(colors, background, scaleType, level) {
- `, + ` ]; rows.push(rowItem1); rows.push(rowItem2); @@ -224,5 +187,5 @@ function createPanelReportTable(colors, background, scaleType, level) { } module.exports = { - createPanelReportTable, + createPanelReportTable }; diff --git a/docs/ui/src/js/createRGBchannelChart.js b/docs/ui/src/js/createRGBchannelChart.js index e53e7c4c..dd5d9522 100644 --- a/docs/ui/src/js/createRGBchannelChart.js +++ b/docs/ui/src/js/createRGBchannelChart.js @@ -9,26 +9,25 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as d3 from "./d3"; -import { filterNaN } from "./utils"; -import { createChart } from "./createChart"; +import * as d3 from './d3'; +import {filterNaN} from './utils'; +import {createChart} from './createChart'; -function createRGBchannelChart(colors, id = "RGBchart") { +function createRGBchannelChart(colors, id = 'RGBchart') { let dest = document.getElementById(id); - dest.innerHTML = " "; + dest.innerHTML = ' '; - if (id === "RGBchart") { + if (id === 'RGBchart') { colors = [...colors]; - colors.push("#000000"); - } else if (id === "sequentialRGBchart" || id === "divergingRGBchart") { + colors.push('#000000'); + } else if (id === 'sequentialRGBchart' || id === 'divergingRGBchart') { colors = colors.reverse(); } // Create chart headers - let RGBheader = document.createElement("h5"); - RGBheader.className = - "spectrum-Typography spectrum-Heading spectrum-Heading--sizeXXS"; - RGBheader.innerHTML = "RGB channels"; + let RGBheader = document.createElement('h5'); + RGBheader.className = 'spectrum-Typography spectrum-Heading spectrum-Heading--sizeXXS'; + RGBheader.innerHTML = 'RGB channels'; dest.appendChild(RGBheader); const fillRange = (start, end) => { @@ -37,33 +36,30 @@ function createRGBchannelChart(colors, id = "RGBchart") { .map((item, index) => start + index); }; let dataX = fillRange(1, colors.length); - let sortedDataX = - id === "RGBchart" - ? dataX.sort((a, b) => a - b) - : dataX.sort((a, b) => b - a); + let sortedDataX = id === 'RGBchart' ? dataX.sort((a, b) => a - b) : dataX.sort((a, b) => b - a); let data = [ { x: sortedDataX, y: colors.map(function (d) { return filterNaN(d3.rgb(d).r); - }), + }) }, { x: sortedDataX, y: colors.map(function (d) { return filterNaN(d3.rgb(d).g); - }), + }) }, { x: sortedDataX, y: colors.map(function (d) { return filterNaN(d3.rgb(d).b); - }), - }, + }) + } ]; - createChart(data, " ", " ", `#${id}`, 0, 255); + createChart(data, ' ', ' ', `#${id}`, 0, 255); } -module.exports = { createRGBchannelChart }; +module.exports = {createRGBchannelChart}; diff --git a/docs/ui/src/js/createRatioChart.js b/docs/ui/src/js/createRatioChart.js index 13563b67..87e5a7dd 100644 --- a/docs/ui/src/js/createRatioChart.js +++ b/docs/ui/src/js/createRatioChart.js @@ -9,22 +9,22 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import { createChart } from "./createChart"; -import { getThemeContrastRatios, getLuminosities } from "./getThemeData"; -import { _theme } from "./initialTheme"; +import * as Leo from '@adobe/leonardo-contrast-colors'; +import {createChart} from './createChart'; +import {getThemeContrastRatios, getLuminosities} from './getThemeData'; +import {_theme} from './initialTheme'; -const chroma = require("chroma-js"); -const { extendChroma } = require("./chroma-plus"); +const chroma = require('chroma-js'); +const {extendChroma} = require('./chroma-plus'); extendChroma(chroma); -const lineTypeSelect = document.getElementById("chartLineType"); +const lineTypeSelect = document.getElementById('chartLineType'); const lineType = lineTypeSelect.value; -let isStep = lineType === "step" ? true : false; +let isStep = lineType === 'step' ? true : false; -lineTypeSelect.addEventListener("change", (e) => { +lineTypeSelect.addEventListener('change', (e) => { let val = e.target.value; - isStep = val === "step" ? true : false; + isStep = val === 'step' ? true : false; let chartRatios = Promise.resolve(getThemeContrastRatios()); chartRatios.then(function (resolve) { @@ -39,30 +39,15 @@ lineTypeSelect.addEventListener("change", (e) => { function createRatioChart(chartRatios, bool) { if (!bool) bool = isStep; - let dest = document.getElementById("contrastChart"); - dest.innerHTML = " "; - let dest2 = document.getElementById("detailContrastChart"); - if (dest2) dest2.innerHTML = " "; + let dest = document.getElementById('contrastChart'); + dest.innerHTML = ' '; + let dest2 = document.getElementById('detailContrastChart'); + if (dest2) dest2.innerHTML = ' '; - let wcagFormula = document.getElementById("themeWCAG").value; - let lightness = Number( - document.getElementById("themeBrightnessSlider").value, - ); + let wcagFormula = document.getElementById('themeWCAG').value; + let lightness = Number(document.getElementById('themeBrightnessSlider').value); // Calculate highest possible contrast ratio (black or white) against background color - const maxPossibleRatio = - lightness > 50 - ? Leo.contrast( - [0, 0, 0], - chroma(_theme.contrastColors[0].background).rgb(), - undefined, - wcagFormula, - ) - : Leo.contrast( - [255, 255, 255], - chroma(_theme.contrastColors[0].background).rgb(), - undefined, - wcagFormula, - ); + const maxPossibleRatio = lightness > 50 ? Leo.contrast([0, 0, 0], chroma(_theme.contrastColors[0].background).rgb(), undefined, wcagFormula) : Leo.contrast([255, 255, 255], chroma(_theme.contrastColors[0].background).rgb(), undefined, wcagFormula); const fillRange = (start, end) => { return Array(end - start + 1) @@ -76,46 +61,24 @@ function createRatioChart(chartRatios, bool) { y: chartRatios.map(function (d) { let cappedRatio = d > maxPossibleRatio ? maxPossibleRatio : d; return parseFloat(cappedRatio); - }), // convert to number - }, + }) // convert to number + } ]; let minRatio = Math.min(...chartRatios); - let yMin = wcagFormula === "wcag3" ? 0 : minRatio < 1 ? minRatio : 1; - let yMax = wcagFormula === "wcag3" ? 106 : 21; + let yMin = wcagFormula === 'wcag3' ? 0 : minRatio < 1 ? minRatio : 1; + let yMax = wcagFormula === 'wcag3' ? 106 : 21; - createChart( - dataContrast, - "Contrast ratio", - "Swatches", - "#contrastChart", - yMin, - yMax, - true, - undefined, - undefined, - bool, - ); + createChart(dataContrast, 'Contrast ratio', 'Swatches', '#contrastChart', yMin, yMax, true, undefined, undefined, bool); // for color details view - createChart( - dataContrast, - "Contrast ratio", - "Swatches", - "#detailContrastChart", - yMin, - yMax, - true, - undefined, - undefined, - bool, - ); + createChart(dataContrast, 'Contrast ratio', 'Swatches', '#detailContrastChart', yMin, yMax, true, undefined, undefined, bool); } function createLuminosityChart(chartLuminosities, bool) { if (!bool) bool = isStep; - let dest = document.getElementById("luminosityChart"); - dest.innerHTML = " "; - let dest2 = document.getElementById("detailLightnessChart"); - if (dest2) dest2.innerHTML = " "; + let dest = document.getElementById('luminosityChart'); + dest.innerHTML = ' '; + let dest2 = document.getElementById('detailLightnessChart'); + if (dest2) dest2.innerHTML = ' '; const fillRange = (start, end) => { return Array(end - start + 1) @@ -128,41 +91,19 @@ function createLuminosityChart(chartLuminosities, bool) { x: dataXluminosity, y: chartLuminosities.map(function (d) { return parseFloat(d); - }), // convert to number - }, + }) // convert to number + } ]; let yMin = 0; let yMax = 100; - createChart( - dataLuminosity, - "Lightness", - "Swatches", - "#luminosityChart", - yMin, - yMax, - true, - undefined, - undefined, - bool, - ); + createChart(dataLuminosity, 'Lightness', 'Swatches', '#luminosityChart', yMin, yMax, true, undefined, undefined, bool); // for color details view - createChart( - dataLuminosity, - "Lightness", - "Swatches", - "#detailLightnessChart", - yMin, - yMax, - true, - undefined, - undefined, - bool, - ); + createChart(dataLuminosity, 'Lightness', 'Swatches', '#detailLightnessChart', yMin, yMax, true, undefined, undefined, bool); } module.exports = { createRatioChart, - createLuminosityChart, + createLuminosityChart }; diff --git a/docs/ui/src/js/createSVGgradient.js b/docs/ui/src/js/createSVGgradient.js index 94b2192e..7e6bb4b4 100644 --- a/docs/ui/src/js/createSVGgradient.js +++ b/docs/ui/src/js/createSVGgradient.js @@ -9,59 +9,59 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { saveAs } from "file-saver"; -import { _theme } from "./initialTheme"; -import { createSvgElement } from "./createHtmlElement"; +import {saveAs} from 'file-saver'; +import {_theme} from './initialTheme'; +import {createSvgElement} from './createHtmlElement'; function createSVGgradient(colors) { let gradientWidth = 800; let gradientHeight = 80; - var svgns = "http://www.w3.org/2000/svg"; + var svgns = 'http://www.w3.org/2000/svg'; - let svgWrapper = document.createElementNS(svgns, "svg"); - svgWrapper.setAttribute("xmlns", svgns); - svgWrapper.setAttribute("version", "1.1"); - svgWrapper.setAttributeNS(null, "width", gradientWidth + "px"); - svgWrapper.setAttributeNS(null, "height", gradientHeight + "px"); - svgWrapper.setAttribute("aria-hidden", "true"); - svgWrapper.id = "gradientSvg"; + let svgWrapper = document.createElementNS(svgns, 'svg'); + svgWrapper.setAttribute('xmlns', svgns); + svgWrapper.setAttribute('version', '1.1'); + svgWrapper.setAttributeNS(null, 'width', gradientWidth + 'px'); + svgWrapper.setAttributeNS(null, 'height', gradientHeight + 'px'); + svgWrapper.setAttribute('aria-hidden', 'true'); + svgWrapper.id = 'gradientSvg'; - let outerElement = document.createElement("div"); - outerElement.id = "_SVGgradient"; + let outerElement = document.createElement('div'); + outerElement.id = '_SVGgradient'; outerElement.appendChild(svgWrapper); document.body.appendChild(outerElement); createSvgElement({ - element: "rect", - id: "gradientRect", + element: 'rect', + id: 'gradientRect', attributes: { width: gradientWidth, height: gradientHeight, - fill: "url(#gradientLinearGrad)", - rx: 8, + fill: 'url(#gradientLinearGrad)', + rx: 8 }, - appendTo: "gradientSvg", + appendTo: 'gradientSvg' }); createSvgElement({ - element: "defs", - id: "gradientDefs", - appendTo: "gradientSvg", + element: 'defs', + id: 'gradientDefs', + appendTo: 'gradientSvg' }); createSvgElement({ - element: "linearGradient", - id: "gradientLinearGrad", + element: 'linearGradient', + id: 'gradientLinearGrad', attributes: { x1: 0, y1: 0, x2: gradientWidth, y2: 0, - gradientUnits: "userSpaceOnUse", + gradientUnits: 'userSpaceOnUse' }, - appendTo: "gradientDefs", + appendTo: 'gradientDefs' }); for (let i = 0; i < colors.length; i++) { @@ -70,12 +70,12 @@ function createSVGgradient(colors) { // only take 10 values from scale if (Number.isInteger(i / 4)) { createSvgElement({ - element: "stop", + element: 'stop', attributes: { offset: i / length, - "stop-color": colors[i], + 'stop-color': colors[i] }, - appendTo: "gradientLinearGrad", + appendTo: 'gradientLinearGrad' }); } } @@ -85,13 +85,13 @@ function downloadSVGgradient(colors, mode, gradientName) { const createGradient = Promise.resolve(createSVGgradient(colors)); createGradient.then(() => { - let svg = document.getElementById("_SVGgradient").innerHTML; + let svg = document.getElementById('_SVGgradient').innerHTML; let filename = `${gradientName}_${mode}_gradient.svg`; - var blob = new Blob([`${svg}`], { type: "image/svg+xml;charset=utf-8" }); + var blob = new Blob([`${svg}`], {type: 'image/svg+xml;charset=utf-8'}); saveAs(blob, filename); - document.getElementById("_SVGgradient").remove(); + document.getElementById('_SVGgradient').remove(); }); } @@ -99,5 +99,5 @@ window.downloadSVGgradient = downloadSVGgradient; module.exports = { createSVGgradient, - downloadSVGgradient, + downloadSVGgradient }; diff --git a/docs/ui/src/js/createSVGswatches.js b/docs/ui/src/js/createSVGswatches.js index 94d57f52..74c37607 100644 --- a/docs/ui/src/js/createSVGswatches.js +++ b/docs/ui/src/js/createSVGswatches.js @@ -9,23 +9,15 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { saveAs } from "file-saver"; -import { _sequentialScale } from "./initialSequentialScale"; -import { _divergingScale } from "./initialDivergingScale"; -import { _qualitativeScale } from "./initialQualitativeScale"; +import {saveAs} from 'file-saver'; +import {_sequentialScale} from './initialSequentialScale'; +import {_divergingScale} from './initialDivergingScale'; +import {_qualitativeScale} from './initialQualitativeScale'; function createSVGswatches(scaleType) { - let colorClass = - scaleType === "sequential" - ? _sequentialScale - : scaleType === "diverging" - ? _divergingScale - : _qualitativeScale; - let colors = - scaleType === "qualitative" - ? colorClass.keeperColors - : colorClass.samples.reverse(); - var svgns = "http://www.w3.org/2000/svg"; + let colorClass = scaleType === 'sequential' ? _sequentialScale : scaleType === 'diverging' ? _divergingScale : _qualitativeScale; + let colors = scaleType === 'qualitative' ? colorClass.keeperColors : colorClass.samples.reverse(); + var svgns = 'http://www.w3.org/2000/svg'; const rectSize = 80; const marginX = 8; @@ -35,15 +27,15 @@ function createSVGswatches(scaleType) { const maxSvgWidth = maxColorWidth; const maxSvgHeight = rectSize; - let svgWrapper = document.createElementNS(svgns, "svg"); - svgWrapper.setAttribute("xmlns", svgns); - svgWrapper.setAttribute("version", "1.1"); - svgWrapper.setAttributeNS(null, "width", maxSvgWidth + "px"); - svgWrapper.setAttributeNS(null, "height", maxSvgHeight + "px"); - svgWrapper.setAttribute("aria-hidden", "true"); - svgWrapper.id = "svg"; + let svgWrapper = document.createElementNS(svgns, 'svg'); + svgWrapper.setAttribute('xmlns', svgns); + svgWrapper.setAttribute('version', '1.1'); + svgWrapper.setAttributeNS(null, 'width', maxSvgWidth + 'px'); + svgWrapper.setAttributeNS(null, 'height', maxSvgHeight + 'px'); + svgWrapper.setAttribute('aria-hidden', 'true'); + svgWrapper.id = 'svg'; - let outerElement = document.createElement("div"); + let outerElement = document.createElement('div'); outerElement.id = `${scaleType}SVGcolorSamples`; let y = 0; @@ -53,13 +45,13 @@ function createSVGswatches(scaleType) { for (let i = 0; i < colors.length; i++) { let x = (rectSize + marginX) * i; - let rect = document.createElementNS(svgns, "rect"); - rect.setAttributeNS(null, "x", x); - rect.setAttributeNS(null, "y", y); - rect.setAttributeNS(null, "width", rectSize); - rect.setAttributeNS(null, "height", rectSize); - rect.setAttributeNS(null, "rx", 8); - rect.setAttributeNS(null, "fill", colors[i]); + let rect = document.createElementNS(svgns, 'rect'); + rect.setAttributeNS(null, 'x', x); + rect.setAttributeNS(null, 'y', y); + rect.setAttributeNS(null, 'width', rectSize); + rect.setAttributeNS(null, 'height', rectSize); + rect.setAttributeNS(null, 'rx', 8); + rect.setAttributeNS(null, 'fill', colors[i]); svgWrapper.appendChild(rect); } } @@ -72,7 +64,7 @@ function downloadSwatches(scaleType) { let scaleName = document.getElementById(`${scaleType}_name`).value; let filename = `${scaleName}_${scaleType}_colors.svg`; - var blob = new Blob([`${svg}`], { type: "image/svg+xml;charset=utf-8" }); + var blob = new Blob([`${svg}`], {type: 'image/svg+xml;charset=utf-8'}); saveAs(blob, filename); document.getElementById(`${scaleType}SVGcolorSamples`).remove(); @@ -81,34 +73,28 @@ function downloadSwatches(scaleType) { window.downloadSwatches = downloadSwatches; -document - .getElementById("downloadSequentialSwatches") - .addEventListener("click", () => { - setTimeout(function () { - downloadSwatches("sequential"); - }), - 1000; - }); - -document - .getElementById("downloadDivergingSwatches") - .addEventListener("click", () => { - setTimeout(function () { - downloadSwatches("diverging"); - }), - 1000; - }); - -document - .getElementById("downloadQualitativeSwatches") - .addEventListener("click", () => { - setTimeout(function () { - downloadSwatches("qualitative"); - }), - 1000; - }); +document.getElementById('downloadSequentialSwatches').addEventListener('click', () => { + setTimeout(function () { + downloadSwatches('sequential'); + }), + 1000; +}); + +document.getElementById('downloadDivergingSwatches').addEventListener('click', () => { + setTimeout(function () { + downloadSwatches('diverging'); + }), + 1000; +}); + +document.getElementById('downloadQualitativeSwatches').addEventListener('click', () => { + setTimeout(function () { + downloadSwatches('qualitative'); + }), + 1000; +}); module.exports = { createSVGswatches, - downloadSwatches, + downloadSwatches }; diff --git a/docs/ui/src/js/createSVGuiKit.js b/docs/ui/src/js/createSVGuiKit.js index 521ba6e8..585e0cb1 100644 --- a/docs/ui/src/js/createSVGuiKit.js +++ b/docs/ui/src/js/createSVGuiKit.js @@ -9,17 +9,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { saveAs } from "file-saver"; -import d3 from "./d3"; -import { _theme, _themeTypography } from "./initialTheme"; -import { getThemeName, getContrastRatioInputs } from "./getThemeData"; -import { capitalizeFirstLetter } from "./utils"; +import {saveAs} from 'file-saver'; +import d3 from './d3'; +import {_theme, _themeTypography} from './initialTheme'; +import {getThemeName, getContrastRatioInputs} from './getThemeData'; +import {capitalizeFirstLetter} from './utils'; function createSVGuiKit() { let colors = _theme.contrastColors; let bgLum = d3.hsluv(colors[0].background).v; let isDark = bgLum > 50 ? false : true; - var svgns = "http://www.w3.org/2000/svg"; + var svgns = 'http://www.w3.org/2000/svg'; const rectSize = 80; const marginX = rectSize + 16; @@ -33,37 +33,34 @@ function createSVGuiKit() { const maxSvgWidth = maxColorWidth; const maxColorsHeight = marginY * numberOfColors + titleYOffset; const maxSvgHeight = maxColorsHeight; - let textColorPositive = isDark ? "#fff" : "#000"; - let textColorInverse = isDark ? "#000" : "#fff"; + let textColorPositive = isDark ? '#fff' : '#000'; + let textColorInverse = isDark ? '#000' : '#fff'; - let svgWrapper = document.createElementNS(svgns, "svg"); - svgWrapper.setAttribute("xmlns", svgns); - svgWrapper.setAttribute("version", "1.1"); - svgWrapper.setAttributeNS(null, "width", maxSvgWidth + "px"); - svgWrapper.setAttributeNS(null, "height", maxSvgHeight + "px"); - svgWrapper.setAttribute("aria-hidden", "true"); + let svgWrapper = document.createElementNS(svgns, 'svg'); + svgWrapper.setAttribute('xmlns', svgns); + svgWrapper.setAttribute('version', '1.1'); + svgWrapper.setAttributeNS(null, 'width', maxSvgWidth + 'px'); + svgWrapper.setAttributeNS(null, 'height', maxSvgHeight + 'px'); + svgWrapper.setAttribute('aria-hidden', 'true'); - let background = document.createElementNS(svgns, "rect"); - background.setAttribute("fill", colors[0].background); - background.setAttribute("width", maxSvgWidth + "px"); - background.setAttribute("height", maxSvgHeight + "px"); + let background = document.createElementNS(svgns, 'rect'); + background.setAttribute('fill', colors[0].background); + background.setAttribute('width', maxSvgWidth + 'px'); + background.setAttribute('height', maxSvgHeight + 'px'); svgWrapper.appendChild(background); - let outerElement = document.createElement("div"); - outerElement.id = "UIkit"; + let outerElement = document.createElement('div'); + outerElement.id = 'UIkit'; // Create text element with theme url at bottom of kit - let textTitle = document.createElementNS(svgns, "text"); - textTitle.setAttribute("x", 16); - textTitle.setAttribute("y", 48); - textTitle.setAttribute("fill", textColorPositive); - textTitle.setAttribute("font-size", 32); - textTitle.setAttribute("font-weight", 700); - textTitle.setAttribute( - "font-family", - "Adobe Clean, AdobeClean-Regular, Adobe Clean", - ); + let textTitle = document.createElementNS(svgns, 'text'); + textTitle.setAttribute('x', 16); + textTitle.setAttribute('y', 48); + textTitle.setAttribute('fill', textColorPositive); + textTitle.setAttribute('font-size', 32); + textTitle.setAttribute('font-weight', 700); + textTitle.setAttribute('font-family', 'Adobe Clean, AdobeClean-Regular, Adobe Clean'); textTitle.textContent = `${getThemeName()}`; svgWrapper.appendChild(textTitle); @@ -73,48 +70,39 @@ function createSVGuiKit() { // skip it, it's the background } else { let name = colors[i].name; - let tokenColorName = `${name.replace(/\s+/g, "")}`; // these names will have had spaces removed already + let tokenColorName = `${name.replace(/\s+/g, '')}`; // these names will have had spaces removed already let values = colors[i].values; let increment = i - 0.75; let y = marginY * increment + titleYOffset; - var title = document.createElementNS(svgns, "text"); - var descriptor = document.createElementNS(svgns, "text"); - var descriptor2 = document.createElementNS(svgns, "text"); - - title.setAttribute("x", 16); - title.setAttribute("y", y + 13); - title.setAttribute("fill", textColorPositive); - title.setAttribute("font-size", 16); - title.setAttribute("font-weight", 700); - title.setAttribute( - "font-family", - "Adobe Clean, AdobeClean-Regular, Adobe Clean", - ); + var title = document.createElementNS(svgns, 'text'); + var descriptor = document.createElementNS(svgns, 'text'); + var descriptor2 = document.createElementNS(svgns, 'text'); + + title.setAttribute('x', 16); + title.setAttribute('y', y + 13); + title.setAttribute('fill', textColorPositive); + title.setAttribute('font-size', 16); + title.setAttribute('font-weight', 700); + title.setAttribute('font-family', 'Adobe Clean, AdobeClean-Regular, Adobe Clean'); title.textContent = capitalizeFirstLetter(name); - descriptor.setAttribute("x", 16); - descriptor.setAttribute("y", y + 60); - descriptor.setAttribute("fill", textColorPositive); - descriptor.setAttribute("font-size", 11); - descriptor.setAttribute("letter-spacing", 0.6); - descriptor.setAttribute("font-weight", "bold"); - descriptor.setAttribute( - "font-family", - "Adobe Clean, AdobeClean-Regular, Adobe Clean", - ); + descriptor.setAttribute('x', 16); + descriptor.setAttribute('y', y + 60); + descriptor.setAttribute('fill', textColorPositive); + descriptor.setAttribute('font-size', 11); + descriptor.setAttribute('letter-spacing', 0.6); + descriptor.setAttribute('font-weight', 'bold'); + descriptor.setAttribute('font-family', 'Adobe Clean, AdobeClean-Regular, Adobe Clean'); descriptor.textContent = `Contrast with`; - descriptor2.setAttribute("x", 16); - descriptor2.setAttribute("y", y + 72); - descriptor2.setAttribute("fill", textColorPositive); - descriptor2.setAttribute("font-size", 11); - descriptor2.setAttribute("letter-spacing", 0.6); - descriptor2.setAttribute("font-weight", "bold"); - descriptor2.setAttribute( - "font-family", - "Adobe Clean, AdobeClean-Regular, Adobe Clean", - ); + descriptor2.setAttribute('x', 16); + descriptor2.setAttribute('y', y + 72); + descriptor2.setAttribute('fill', textColorPositive); + descriptor2.setAttribute('font-size', 11); + descriptor2.setAttribute('letter-spacing', 0.6); + descriptor2.setAttribute('font-weight', 'bold'); + descriptor2.setAttribute('font-family', 'Adobe Clean, AdobeClean-Regular, Adobe Clean'); descriptor2.textContent = `background color`; svgWrapper.appendChild(title); @@ -122,42 +110,35 @@ function createSVGuiKit() { svgWrapper.appendChild(descriptor2); // loop each value to create a swatch for (let j = 0; j < values.length; j++) { - var rect = document.createElementNS(svgns, "rect"); - var text = document.createElementNS(svgns, "text"); - var subHead = document.createElementNS(svgns, "text"); + var rect = document.createElementNS(svgns, 'rect'); + var text = document.createElementNS(svgns, 'text'); + var subHead = document.createElementNS(svgns, 'text'); let x = marginX * j + offsetX; let textX = x + 8; let textY = y + rectSize - 8; - let textColor = - values[j].contrast > 4.5 ? textColorInverse : textColorPositive; - - rect.setAttributeNS(null, "x", x); - rect.setAttributeNS(null, "y", y); - rect.setAttributeNS(null, "width", "80"); - rect.setAttributeNS(null, "height", "80"); - rect.setAttributeNS(null, "rx", "8"); - rect.setAttributeNS(null, "fill", values[j].value); - - text.setAttribute("x", textX); - text.setAttribute("y", textY); - text.setAttribute("fill", textColor); - text.setAttribute("font-size", 12); - text.setAttribute( - "font-family", - "Adobe Clean, AdobeClean-Regular, Adobe Clean", - ); + let textColor = values[j].contrast > 4.5 ? textColorInverse : textColorPositive; + + rect.setAttributeNS(null, 'x', x); + rect.setAttributeNS(null, 'y', y); + rect.setAttributeNS(null, 'width', '80'); + rect.setAttributeNS(null, 'height', '80'); + rect.setAttributeNS(null, 'rx', '8'); + rect.setAttributeNS(null, 'fill', values[j].value); + + text.setAttribute('x', textX); + text.setAttribute('y', textY); + text.setAttribute('fill', textColor); + text.setAttribute('font-size', 12); + text.setAttribute('font-family', 'Adobe Clean, AdobeClean-Regular, Adobe Clean'); text.textContent = `${values[j].contrast}:1`; - subHead.setAttribute("x", x); - subHead.setAttribute("y", y - 11); - subHead.setAttribute("fill", textColorPositive); - subHead.setAttribute("font-size", 14); - subHead.setAttribute( - "font-family", - "Adobe Clean, AdobeClean-Regular, Adobe Clean", - ); - subHead.textContent = values[j].name.replace(tokenColorName, ""); + subHead.setAttribute('x', x); + subHead.setAttribute('y', y - 11); + subHead.setAttribute('fill', textColorPositive); + subHead.setAttribute('font-size', 14); + subHead.setAttribute('font-family', 'Adobe Clean, AdobeClean-Regular, Adobe Clean'); + subHead.textContent = values[j].name.replace(tokenColorName, ''); svgWrapper.appendChild(rect); svgWrapper.appendChild(text); @@ -173,28 +154,26 @@ function createSVGuiKit() { function downloadUiKit() { createSVGuiKit(); let themeName = getThemeName(); - let svg = document.getElementById("UIkit").innerHTML; + let svg = document.getElementById('UIkit').innerHTML; let filename = `${themeName}.svg`; - var blob = new Blob([`${svg}`], { type: "image/svg+xml;charset=utf-8" }); + var blob = new Blob([`${svg}`], {type: 'image/svg+xml;charset=utf-8'}); saveAs(blob, filename); - document.getElementById("UIkit").remove(); + document.getElementById('UIkit').remove(); } window.downloadUiKit = downloadUiKit; -document - .getElementById("downloadThemeColorsSvg") - .addEventListener("click", () => { - setTimeout(function () { - downloadUiKit(); - }), - 1000; - }); +document.getElementById('downloadThemeColorsSvg').addEventListener('click', () => { + setTimeout(function () { + downloadUiKit(); + }), + 1000; +}); module.exports = { createSVGuiKit, - downloadUiKit, + downloadUiKit }; diff --git a/docs/ui/src/js/createSamples.js b/docs/ui/src/js/createSamples.js index 24c7920c..86e498be 100644 --- a/docs/ui/src/js/createSamples.js +++ b/docs/ui/src/js/createSamples.js @@ -9,19 +9,18 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { _sequentialScale } from "./initialSequentialScale"; -import { _divergingScale } from "./initialDivergingScale"; -import { createHtmlElement } from "./createHtmlElement"; -import hljs from "highlight.js/lib/core"; -import javascript from "highlight.js/lib/languages/javascript"; -import css from "highlight.js/lib/languages/css"; -import { cssColorToRgb } from "./utils"; -hljs.registerLanguage("javascript", javascript); -hljs.registerLanguage("css", css); +import {_sequentialScale} from './initialSequentialScale'; +import {_divergingScale} from './initialDivergingScale'; +import {createHtmlElement} from './createHtmlElement'; +import hljs from 'highlight.js/lib/core'; +import javascript from 'highlight.js/lib/languages/javascript'; +import css from 'highlight.js/lib/languages/css'; +import {cssColorToRgb} from './utils'; +hljs.registerLanguage('javascript', javascript); +hljs.registerLanguage('css', css); function createSamples(samples, scaleType) { - const colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; + const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; const originalSwatches = colorClass.swatches; const originalOutput = colorClass.output; const outputFormatPicker = document.getElementById(`${scaleType}_format`); @@ -30,23 +29,21 @@ function createSamples(samples, scaleType) { const quotes = quoteSwitch.checked; // reassign new swatch value colorClass.swatches = samples; - const panelOutputContent = document.getElementById( - `${scaleType}ColorScaleOutput`, - ); - panelOutputContent.innerHTML = " "; + const panelOutputContent = document.getElementById(`${scaleType}ColorScaleOutput`); + panelOutputContent.innerHTML = ' '; let samplesWrapper = document.getElementById(`${scaleType}SampleSwatches`); - samplesWrapper.innerHTML = " "; + samplesWrapper.innerHTML = ' '; let sampleColors = colorClass.colors; for (let i = 0; i < samples; i++) { createHtmlElement({ - element: "div", - className: "sampleSwatch", + element: 'div', + className: 'sampleSwatch', styles: { - backgroundColor: sampleColors[i], + backgroundColor: sampleColors[i] }, - appendTo: `${scaleType}SampleSwatches`, + appendTo: `${scaleType}SampleSwatches` }); } @@ -54,7 +51,7 @@ function createSamples(samples, scaleType) { sampleColors = colorClass.colors; colorClass.samples = - colorClass.output === "HEX" || colorClass.output === "RGB" + colorClass.output === 'HEX' || colorClass.output === 'RGB' ? sampleColors : sampleColors.map((c) => { return cssColorToRgb(c); @@ -66,8 +63,8 @@ function createSamples(samples, scaleType) { return `"${c}"`; }) .toString() - .replaceAll(",", ", ") - : sampleColors.toString().replaceAll(",", ", "); + .replaceAll(',', ', ') + : sampleColors.toString().replaceAll(',', ', '); panelOutputContent.innerHTML = colorvalueString; // Reset color class to original swatches @@ -76,5 +73,5 @@ function createSamples(samples, scaleType) { } module.exports = { - createSamples, + createSamples }; diff --git a/docs/ui/src/js/createTable.js b/docs/ui/src/js/createTable.js index fb79ac12..290484a1 100644 --- a/docs/ui/src/js/createTable.js +++ b/docs/ui/src/js/createTable.js @@ -12,31 +12,29 @@ governing permissions and limitations under the License. function createTable(headers, rows, destId, quiet = false) { let dest = document.getElementById(destId); - let table = document.createElement("table"); - table.className = quiet - ? "spectrum-Table spectrum-Table--sizeM spectrum-Table--quiet" - : "spectrum-Table spectrum-Table--sizeM"; - let tHead = document.createElement("thead"); - tHead.className = "spectrum-Table-head"; - let hTr = document.createElement("tr"); - let tBody = document.createElement("tbody"); - tBody.className = "spectrum-Table-body"; + let table = document.createElement('table'); + table.className = quiet ? 'spectrum-Table spectrum-Table--sizeM spectrum-Table--quiet' : 'spectrum-Table spectrum-Table--sizeM'; + let tHead = document.createElement('thead'); + tHead.className = 'spectrum-Table-head'; + let hTr = document.createElement('tr'); + let tBody = document.createElement('tbody'); + tBody.className = 'spectrum-Table-body'; for (let i = 0; i < headers.length; i++) { - let head = document.createElement("th"); - head.className = "spectrum-Table-headCell"; + let head = document.createElement('th'); + head.className = 'spectrum-Table-headCell'; head.innerHTML = headers[i]; hTr.appendChild(head); } for (let i = 0; i < rows.length; i++) { - let row = document.createElement("tr"); - row.className = "spectrum-Table-row"; + let row = document.createElement('tr'); + row.className = 'spectrum-Table-row'; for (let j = 0; j < rows[i].length; j++) { - let item = document.createElement("td"); - item.className = "spectrum-Table-cell"; + let item = document.createElement('td'); + item.className = 'spectrum-Table-cell'; item.innerHTML = rows[i][j]; row.appendChild(item); @@ -53,5 +51,5 @@ function createTable(headers, rows, destId, quiet = false) { } module.exports = { - createTable, + createTable }; diff --git a/docs/ui/src/js/createXML.js b/docs/ui/src/js/createXML.js index d7ddd708..9cd87fee 100644 --- a/docs/ui/src/js/createXML.js +++ b/docs/ui/src/js/createXML.js @@ -9,35 +9,22 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { saveAs } from "file-saver"; -import { _sequentialScale } from "./initialSequentialScale"; -import { _divergingScale } from "./initialDivergingScale"; -import { _qualitativeScale } from "./initialQualitativeScale"; +import {saveAs} from 'file-saver'; +import {_sequentialScale} from './initialSequentialScale'; +import {_divergingScale} from './initialDivergingScale'; +import {_qualitativeScale} from './initialQualitativeScale'; function createXML(scaleType) { - let colorClass = - scaleType === "sequential" - ? _sequentialScale - : scaleType === "diverging" - ? _divergingScale - : _qualitativeScale; - let colors = - scaleType === "qualitative" - ? colorClass.keeperColors - : colorClass.samples.reverse(); + let colorClass = scaleType === 'sequential' ? _sequentialScale : scaleType === 'diverging' ? _divergingScale : _qualitativeScale; + let colors = scaleType === 'qualitative' ? colorClass.keeperColors : colorClass.samples.reverse(); // Type names for Tableau XML - let type = - scaleType === "sequential" - ? "ordered-sequential" - : scaleType === "diverging" - ? "ordered-diverging" - : "regular"; + let type = scaleType === 'sequential' ? 'ordered-sequential' : scaleType === 'diverging' ? 'ordered-diverging' : 'regular'; let scaleName = document.getElementById(`${scaleType}_name`).value; let colorTags = colors.map((c) => { return `${c}`; }); - let colorTagString = colorTags.toString().replaceAll(",<", "\n <"); + let colorTagString = colorTags.toString().replaceAll(',<', '\n <'); let xml = ` @@ -59,7 +46,7 @@ function downloadXML(scaleType) { let scaleName = document.getElementById(`${scaleType}_name`).value; let filename = `${scaleName}_${scaleType}_colors.xml`; - var blob = new Blob([`${file}`], { type: "text/plain" }); + var blob = new Blob([`${file}`], {type: 'text/plain'}); saveAs(blob, filename); }); @@ -67,34 +54,28 @@ function downloadXML(scaleType) { window.downloadXML = downloadXML; -document - .getElementById("sequential_downloadXml") - .addEventListener("click", () => { - setTimeout(function () { - downloadXML("sequential"); - }), - 1000; - }); +document.getElementById('sequential_downloadXml').addEventListener('click', () => { + setTimeout(function () { + downloadXML('sequential'); + }), + 1000; +}); -document - .getElementById("diverging_downloadXml") - .addEventListener("click", () => { - setTimeout(function () { - downloadXML("diverging"); - }), - 1000; - }); +document.getElementById('diverging_downloadXml').addEventListener('click', () => { + setTimeout(function () { + downloadXML('diverging'); + }), + 1000; +}); -document - .getElementById("qualitative_downloadXml") - .addEventListener("click", () => { - setTimeout(function () { - downloadXML("qualitative"); - }), - 1000; - }); +document.getElementById('qualitative_downloadXml').addEventListener('click', () => { + setTimeout(function () { + downloadXML('qualitative'); + }), + 1000; +}); module.exports = { createXML, - downloadXML, + downloadXML }; diff --git a/docs/ui/src/js/cvdColors.js b/docs/ui/src/js/cvdColors.js index 64fd4843..e883907d 100644 --- a/docs/ui/src/js/cvdColors.js +++ b/docs/ui/src/js/cvdColors.js @@ -9,40 +9,40 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as blinder from "color-blind"; +import * as blinder from 'color-blind'; -import d3 from "./d3"; -import { showToast, hideToast } from "./toast"; +import d3 from './d3'; +import {showToast, hideToast} from './toast'; function cvdColors(colors) { const original = colors; - let cvdModeDropdown = document.getElementById("cvdMode"); + let cvdModeDropdown = document.getElementById('cvdMode'); let cvdMode = cvdModeDropdown.value; // if not an array if (!Array.isArray(colors)) { - if (cvdMode == "Deuteranomaly") { + if (cvdMode == 'Deuteranomaly') { colors = blinder.deuteranomaly(colors); showToast(); - } else if (cvdMode == "Deuteranopia") { + } else if (cvdMode == 'Deuteranopia') { colors = blinder.deuteranopia(colors); showToast(); - } else if (cvdMode == "Protanomaly") { + } else if (cvdMode == 'Protanomaly') { colors = blinder.protanomaly(colors); showToast(); - } else if (cvdMode == "Protanopia") { + } else if (cvdMode == 'Protanopia') { colors = blinder.protanopia(colors); showToast(); - } else if (cvdMode == "Tritanomaly") { + } else if (cvdMode == 'Tritanomaly') { colors = blinder.tritanomaly(colors); showToast(); - } else if (cvdMode == "Tritanopia") { + } else if (cvdMode == 'Tritanopia') { colors = blinder.tritanopia(colors); showToast(); - } else if (cvdMode == "Achromatomaly") { + } else if (cvdMode == 'Achromatomaly') { colors = blinder.achromatomaly(colors); showToast(); - } else if (cvdMode == "Achromatopsia") { + } else if (cvdMode == 'Achromatopsia') { colors = blinder.achromatopsia(colors); showToast(); } else { @@ -52,21 +52,21 @@ function cvdColors(colors) { } // must be an array. else { - if (cvdMode == "Deuteranomaly") { + if (cvdMode == 'Deuteranomaly') { colors = colors.map((c) => blinder.deuteranomaly(c)); - } else if (cvdMode == "Deuteranopia") { + } else if (cvdMode == 'Deuteranopia') { colors = colors.map((c) => blinder.deuteranopia(c)); - } else if (cvdMode == "Protanomaly") { + } else if (cvdMode == 'Protanomaly') { colors = colors.map((c) => blinder.protanomaly(c)); - } else if (cvdMode == "Protanopia") { + } else if (cvdMode == 'Protanopia') { colors = colors.map((c) => blinder.protanopia(c)); - } else if (cvdMode == "Tritanomaly") { + } else if (cvdMode == 'Tritanomaly') { colors = colors.map((c) => blinder.tritanomaly(c)); - } else if (cvdMode == "Tritanopia") { + } else if (cvdMode == 'Tritanopia') { colors = colors.map((c) => blinder.tritanopia(c)); - } else if (cvdMode == "Achromatomaly") { + } else if (cvdMode == 'Achromatomaly') { colors = colors.map((c) => blinder.achromatomaly(c)); - } else if (cvdMode == "Achromatopsia") { + } else if (cvdMode == 'Achromatopsia') { colors = colors.map((c) => blinder.achromatopsia(c)); } else { // do nothing @@ -77,4 +77,4 @@ function cvdColors(colors) { return colors; } -module.exports = { cvdColors }; +module.exports = {cvdColors}; diff --git a/docs/ui/src/js/d3.js b/docs/ui/src/js/d3.js index 22c05839..2034082c 100644 --- a/docs/ui/src/js/d3.js +++ b/docs/ui/src/js/d3.js @@ -20,16 +20,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -const d3 = require("d3"); -const d3cam02 = require("d3-cam02"); -const d3hsluv = require("d3-hsluv"); -const d3hsv = require("d3-hsv"); +const d3 = require('d3'); +const d3cam02 = require('d3-cam02'); +const d3hsluv = require('d3-hsluv'); +const d3hsv = require('d3-hsv'); const d3plus = { ...d3, ...d3cam02, ...d3hsluv, - ...d3hsv, + ...d3hsv }; d3plus.interpolateJch = (start, end) => { @@ -55,8 +55,8 @@ d3plus.interpolateJch = (start, end) => { end.h -= 360; } - const startc = d3.hcl(start + "").c; - const endc = d3.hcl(end + "").c; + const startc = d3.hcl(start + '').c; + const endc = d3.hcl(end + '').c; if (!startc) { start.h = end.h; } @@ -74,7 +74,7 @@ d3plus.interpolateJch = (start, end) => { start.C = C(t); start.h = h(t); start.opacity = opacity(t); - return start + ""; + return start + ''; }; }; diff --git a/docs/ui/src/js/demos/demo_chord.js b/docs/ui/src/js/demos/demo_chord.js index 6d8122c0..ca113a57 100644 --- a/docs/ui/src/js/demos/demo_chord.js +++ b/docs/ui/src/js/demos/demo_chord.js @@ -9,13 +9,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "../d3"; -import { _divergingScale } from "../initialDivergingScale"; -import { _sequentialScale } from "../initialSequentialScale"; +import d3 from '../d3'; +import {_divergingScale} from '../initialDivergingScale'; +import {_sequentialScale} from '../initialSequentialScale'; function chord(scaleType, colors) { - const colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; + const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; const originalSwatches = colorClass.swatches; colorClass.swatches = 4; @@ -27,18 +26,18 @@ function chord(scaleType, colors) { // create the svg area var svg = d3 .select(`#${scaleType}Chord`) - .append("svg") - .attr("width", width) - .attr("height", height) - .append("g") - .attr("transform", `translate(${width / 2}, ${height / 2})`); + .append('svg') + .attr('width', width) + .attr('height', height) + .append('g') + .attr('transform', `translate(${width / 2}, ${height / 2})`); // create a matrix var matrix = [ [0, 5871, 8916, 2868], [1951, 0, 2060, 6171], [8010, 16145, 0, 8045], - [1013, 990, 940, 0], + [1013, 990, 940, 0] ]; // 4 groups, so create a vector of 4 colors @@ -50,39 +49,39 @@ function chord(scaleType, colors) { // add the groups on the outer part of the circle svg .datum(res) - .append("g") - .selectAll("g") + .append('g') + .selectAll('g') .data(function (d) { return d.groups; }) .enter() - .append("g") - .append("path") - .style("fill", function (d, i) { + .append('g') + .append('path') + .style('fill', function (d, i) { return colors[i]; }) - .style("stroke", "black") - .attr("d", d3.arc().innerRadius(radius).outerRadius(outerRadius)); + .style('stroke', 'black') + .attr('d', d3.arc().innerRadius(radius).outerRadius(outerRadius)); // Add the links between groups svg .datum(res) - .append("g") - .selectAll("path") + .append('g') + .selectAll('path') .data(function (d) { return d; }) .enter() - .append("path") - .attr("d", d3.ribbon().radius(radius)) - .style("fill", function (d) { + .append('path') + .attr('d', d3.ribbon().radius(radius)) + .style('fill', function (d) { return colors[d.source.index]; }) // colors depend on the source group. Change to target otherwise. - .style("stroke", "black"); + .style('stroke', 'black'); colorClass.swatches = originalSwatches; } module.exports = { - chord, + chord }; diff --git a/docs/ui/src/js/demos/demo_choropleth.js b/docs/ui/src/js/demos/demo_choropleth.js index d8aa91af..ee825f73 100644 --- a/docs/ui/src/js/demos/demo_choropleth.js +++ b/docs/ui/src/js/demos/demo_choropleth.js @@ -9,26 +9,25 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "../d3"; -import { _divergingScale } from "../initialDivergingScale"; -import { _sequentialScale } from "../initialSequentialScale"; +import d3 from '../d3'; +import {_divergingScale} from '../initialDivergingScale'; +import {_sequentialScale} from '../initialSequentialScale'; function choropleth(scaleType) { - const colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; + const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; const originalSwatches = colorClass.swatches; colorClass.swatches = 7; // The svg - var margin = { top: 30, right: 30, bottom: 30, left: 30 }, + var margin = {top: 30, right: 30, bottom: 30, left: 30}, width = 700 - margin.left - margin.right, height = 350 - margin.top - margin.bottom; var svg = d3 .select(`#${scaleType}Choropleth`) - .append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g"); + .append('svg') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g'); // .attr("transform", // "translate(" + margin.left + "," + margin.top + ")"); @@ -42,36 +41,28 @@ function choropleth(scaleType) { // Data and color scale let data = new Map(); - const colorScale = d3 - .scaleThreshold() - .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000]) - .range(colorClass.colors); + const colorScale = d3.scaleThreshold().domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000]).range(colorClass.colors); // const colorScale = colorClass.colorFunction; // Load external data and boot Promise.all([ - d3.json( - "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", - ), - d3.csv( - "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", - function (d) { - data.set(d.code, +d.pop); - }, - ), + d3.json('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson'), + d3.csv('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv', function (d) { + data.set(d.code, +d.pop); + }) ]).then(function (loadData) { let topo = loadData[0]; // Draw the map svg - .append("g") - .selectAll("path") + .append('g') + .selectAll('path') .data(topo.features) - .join("path") + .join('path') // draw each country - .attr("d", d3.geoPath().projection(projection)) + .attr('d', d3.geoPath().projection(projection)) // set the color of each country - .attr("fill", function (d) { + .attr('fill', function (d) { d.total = data.get(d.id) || 0; return colorScale(d.total); }); @@ -81,5 +72,5 @@ function choropleth(scaleType) { } module.exports = { - choropleth, + choropleth }; diff --git a/docs/ui/src/js/demos/demo_density.js b/docs/ui/src/js/demos/demo_density.js index d7794cf3..ef2099c9 100644 --- a/docs/ui/src/js/demos/demo_density.js +++ b/docs/ui/src/js/demos/demo_density.js @@ -9,56 +9,50 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "../d3"; +import d3 from '../d3'; // import * as d3hexbin from 'd3-hexbin'; -import { _divergingScale } from "../initialDivergingScale"; -import { _sequentialScale } from "../initialSequentialScale"; +import {_divergingScale} from '../initialDivergingScale'; +import {_sequentialScale} from '../initialSequentialScale'; // Object.assign(d3, d3hexbin); function density(scaleType) { - const colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; + const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; // set the dimensions and margins of the graph - const margin = { top: 10, right: 30, bottom: 30, left: 40 }, + const margin = {top: 10, right: 30, bottom: 30, left: 40}, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page const svg = d3 .select(`${scaleType}Hexbin`) - .append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g") - .attr("transform", `translate(${margin.left},${margin.top})`); + .append('svg') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g') + .attr('transform', `translate(${margin.left},${margin.top})`); // read data - d3.csv( - "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_for_density2d.csv", - ).then(function (data) { + d3.csv('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_for_density2d.csv').then(function (data) { // Add X axis const x = d3 .scaleLinear() .domain([5, 20]) .range([margin.left, width - margin.right]); - svg - .append("g") - .attr("transform", `translate(0, ${height})`) - .call(d3.axisBottom(x)); + svg.append('g').attr('transform', `translate(0, ${height})`).call(d3.axisBottom(x)); // Add Y axis const y = d3 .scaleLinear() .domain([5, 25]) .range([height - margin.bottom, margin.top]); - svg.append("g").call(d3.axisLeft(y)); + svg.append('g').call(d3.axisLeft(y)); // Prepare a color palette const color = d3 .scaleLinear() .domain([0, 1]) // Points per square pixel. - .range(["white", "#69b3a2"]); + .range(['white', '#69b3a2']); // compute the density data const densityData = d3 @@ -74,18 +68,18 @@ function density(scaleType) { // show the shape! svg - .insert("g", "g") - .selectAll("path") + .insert('g', 'g') + .selectAll('path') .data(densityData) .enter() - .append("path") - .attr("d", d3.geoPath()) - .attr("fill", function (d) { + .append('path') + .attr('d', d3.geoPath()) + .attr('fill', function (d) { return color(d.value); }); }); } module.exports = { - density, + density }; diff --git a/docs/ui/src/js/demos/demo_donut.js b/docs/ui/src/js/demos/demo_donut.js index 4da03530..47f432fb 100644 --- a/docs/ui/src/js/demos/demo_donut.js +++ b/docs/ui/src/js/demos/demo_donut.js @@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "../d3"; +import d3 from '../d3'; function donut(scaleType, colors) { // set the dimensions and margins of the graph @@ -23,11 +23,11 @@ function donut(scaleType, colors) { // append the svg object to the div called 'my_dataviz' var svg = d3 .select(`#${scaleType}Donut`) - .append("svg") - .attr("width", width) - .attr("height", height) - .append("g") - .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); + .append('svg') + .attr('width', width) + .attr('height', height) + .append('g') + .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); // Create dummy data var data = { @@ -39,7 +39,7 @@ function donut(scaleType, colors) { f: 5, g: 2, h: 3, - i: 3, + i: 3 }; // set the color scale @@ -53,24 +53,24 @@ function donut(scaleType, colors) { // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function. svg - .selectAll("whatever") + .selectAll('whatever') .data(data_ready) .enter() - .append("path") + .append('path') .attr( - "d", + 'd', d3 .arc() .innerRadius(100) // This is the size of the donut hole - .outerRadius(radius), + .outerRadius(radius) ) - .attr("fill", function (d) { + .attr('fill', function (d) { return color(d.data.key); }) - .attr("stroke", "black") - .style("stroke-width", "1px"); + .attr('stroke', 'black') + .style('stroke-width', '1px'); } module.exports = { - donut, + donut }; diff --git a/docs/ui/src/js/demos/demo_heatmap.js b/docs/ui/src/js/demos/demo_heatmap.js index 7f3e9122..402e4c13 100644 --- a/docs/ui/src/js/demos/demo_heatmap.js +++ b/docs/ui/src/js/demos/demo_heatmap.js @@ -9,68 +9,65 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "../d3"; -import { _divergingScale } from "../initialDivergingScale"; -import { _sequentialScale } from "../initialSequentialScale"; +import d3 from '../d3'; +import {_divergingScale} from '../initialDivergingScale'; +import {_sequentialScale} from '../initialSequentialScale'; function heatmap(scaleType) { - const colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; + const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; // set the dimensions and margins of the graph - var margin = { top: 30, right: 30, bottom: 30, left: 30 }, + var margin = {top: 30, right: 30, bottom: 30, left: 30}, width = 250 - margin.left - margin.right, height = 250 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3 .select(`#${scaleType}Heatmap`) - .append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + .append('svg') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g') + .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); // Labels of row and columns - var myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]; - var myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]; + var myGroups = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; + var myVars = ['v1', 'v2', 'v3', 'v4', 'v5', 'v6', 'v7', 'v8', 'v9', 'v10']; // Build X scales and axis: var x = d3.scaleBand().range([0, width]).domain(myGroups).padding(0.01); svg - .append("g") - .attr("transform", "translate(0," + height + ")") + .append('g') + .attr('transform', 'translate(0,' + height + ')') .call(d3.axisBottom(x)); // Build X scales and axis: var y = d3.scaleBand().range([height, 0]).domain(myVars).padding(0.01); - svg.append("g").call(d3.axisLeft(y)); + svg.append('g').call(d3.axisLeft(y)); colorClass.swatches = 100; var myColor = colorClass.colorFunction; - d3.csv( - "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", - ).then(function (data) { + d3.csv('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv').then(function (data) { svg .selectAll() .data(data, function (d) { - return d.group + ":" + d.variable; + return d.group + ':' + d.variable; }) - .join("rect") - .attr("x", function (d) { + .join('rect') + .attr('x', function (d) { return x(d.group); }) - .attr("y", function (d) { + .attr('y', function (d) { return y(d.variable); }) - .attr("width", x.bandwidth()) - .attr("height", y.bandwidth()) - .style("fill", function (d) { + .attr('width', x.bandwidth()) + .attr('height', y.bandwidth()) + .style('fill', function (d) { return myColor(d.value).hex(); }); }); } module.exports = { - heatmap, + heatmap }; diff --git a/docs/ui/src/js/demos/demo_hexbin.js b/docs/ui/src/js/demos/demo_hexbin.js index 8a872f61..bf90d684 100644 --- a/docs/ui/src/js/demos/demo_hexbin.js +++ b/docs/ui/src/js/demos/demo_hexbin.js @@ -9,42 +9,36 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "../d3"; -import * as d3hexbin from "d3-hexbin"; -import { _divergingScale } from "../initialDivergingScale"; -import { _sequentialScale } from "../initialSequentialScale"; +import d3 from '../d3'; +import * as d3hexbin from 'd3-hexbin'; +import {_divergingScale} from '../initialDivergingScale'; +import {_sequentialScale} from '../initialSequentialScale'; Object.assign(d3, d3hexbin); function hexbin(scaleType) { - const colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; - var margin = { top: 10, right: 30, bottom: 30, left: 40 }, + const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; + var margin = {top: 10, right: 30, bottom: 30, left: 40}, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; // append the svg object to the body of the page const svg = d3 .select(`${scaleType}Hexbin`) - .append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g") - .attr("transform", `translate(${margin.left}, ${margin.top})`); + .append('svg') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g') + .attr('transform', `translate(${margin.left}, ${margin.top})`); // read data - d3.csv( - "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_for_density2d.csv", - ).then(function (data) { + d3.csv('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_for_density2d.csv').then(function (data) { // Add X axis const x = d3.scaleLinear().domain([5, 18]).range([0, width]); - svg - .append("g") - .attr("transform", `translate(0, ${height})`) - .call(d3.axisBottom(x)); + svg.append('g').attr('transform', `translate(0, ${height})`).call(d3.axisBottom(x)); // Add Y axis const y = d3.scaleLinear().domain([5, 20]).range([height, 0]); - svg.append("g").call(d3.axisLeft(y)); + svg.append('g').call(d3.axisLeft(y)); // Reformat the data: d3.hexbin() needs a specific format const inputForHexbinFun = []; @@ -56,7 +50,7 @@ function hexbin(scaleType) { const color = d3 .scaleLinear() .domain([0, 600]) // Number of points in the bin? - .range(["transparent", "#69b3a2"]); + .range(['transparent', '#69b3a2']); // Compute the hexbin data const hexbin = d3 @@ -64,35 +58,30 @@ function hexbin(scaleType) { .radius(9) // size of the bin in px .extent([ [0, 0], - [width, height], + [width, height] ]); // Plot the hexbins - svg - .append("clipPath") - .attr("id", "clip") - .append("rect") - .attr("width", width) - .attr("height", height); + svg.append('clipPath').attr('id', 'clip').append('rect').attr('width', width).attr('height', height); svg - .append("g") - .attr("clip-path", "url(#clip)") - .selectAll("path") + .append('g') + .attr('clip-path', 'url(#clip)') + .selectAll('path') .data(hexbin(inputForHexbinFun)) - .join("path") - .attr("d", hexbin.hexagon()) - .attr("transform", function (d) { + .join('path') + .attr('d', hexbin.hexagon()) + .attr('transform', function (d) { return `translate(${d.x}, ${d.y})`; }) - .attr("fill", function (d) { + .attr('fill', function (d) { return color(d.length); }) - .attr("stroke", "black") - .attr("stroke-width", "0.1"); + .attr('stroke', 'black') + .attr('stroke-width', '0.1'); }); } module.exports = { - hexbin, + hexbin }; diff --git a/docs/ui/src/js/demos/demo_scatter.js b/docs/ui/src/js/demos/demo_scatter.js index 9ea9d404..501a5d84 100644 --- a/docs/ui/src/js/demos/demo_scatter.js +++ b/docs/ui/src/js/demos/demo_scatter.js @@ -9,16 +9,15 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "../d3"; -import { _divergingScale } from "../initialDivergingScale"; -import { _sequentialScale } from "../initialSequentialScale"; +import d3 from '../d3'; +import {_divergingScale} from '../initialDivergingScale'; +import {_sequentialScale} from '../initialSequentialScale'; function scatter(scaleType) { - const colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; + const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; // set the dimensions and margins of the graph - var margin = { top: 30, right: 30, bottom: 30, left: 60 }, + var margin = {top: 30, right: 30, bottom: 30, left: 60}, width = 350 - margin.left - margin.right, height = 250 - margin.top - margin.bottom; @@ -27,47 +26,45 @@ function scatter(scaleType) { // append the svg object to the body of the page var svg = d3 .select(`#${scaleType}Scatter`) - .append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + .append('svg') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g') + .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); //Read the data - d3.csv( - "https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", - ).then(function (data) { + d3.csv('https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv').then(function (data) { // Add X axis var x = d3.scaleLinear().domain([0, 4000]).range([0, width]); svg - .append("g") - .attr("transform", "translate(0," + height + ")") + .append('g') + .attr('transform', 'translate(0,' + height + ')') .call(d3.axisBottom(x)); // Add Y axis var y = d3.scaleLinear().domain([0, 500000]).range([height, 0]); - svg.append("g").call(d3.axisLeft(y)); + svg.append('g').call(d3.axisLeft(y)); // Add dots svg - .append("g") - .selectAll("dot") + .append('g') + .selectAll('dot') .data(data) .enter() - .append("circle") - .attr("cx", function (d) { + .append('circle') + .attr('cx', function (d) { return x(d.GrLivArea); }) - .attr("cy", function (d) { + .attr('cy', function (d) { return y(d.SalePrice); }) - .attr("r", 1.5) - .style("fill", function (d) { + .attr('r', 1.5) + .style('fill', function (d) { return myColor(d.SalePrice / 5000); }); }); } module.exports = { - scatter, + scatter }; diff --git a/docs/ui/src/js/demos/demo_stackedArea.js b/docs/ui/src/js/demos/demo_stackedArea.js index 65697d7c..445b1f52 100644 --- a/docs/ui/src/js/demos/demo_stackedArea.js +++ b/docs/ui/src/js/demos/demo_stackedArea.js @@ -9,27 +9,25 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "../d3"; +import d3 from '../d3'; function stackedArea(scaleType, colors) { // set the dimensions and margins of the graph - var margin = { top: 20, right: 30, bottom: 30, left: 55 }, + var margin = {top: 20, right: 30, bottom: 30, left: 55}, width = 600 - margin.left - margin.right, height = 250 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3 .select(`#${scaleType}StackedArea`) - .append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + .append('svg') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g') + .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); // Parse the Data - d3.csv( - "https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered_wide.csv", - ).then(function (data) { + d3.csv('https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered_wide.csv').then(function (data) { // List of groups = header of the csv files var keys = data.columns.slice(1); @@ -39,17 +37,17 @@ function stackedArea(scaleType, colors) { .domain( d3.extent(data, function (d) { return d.year; - }), + }) ) .range([0, width]); svg - .append("g") - .attr("transform", "translate(0," + height + ")") + .append('g') + .attr('transform', 'translate(0,' + height + ')') .call(d3.axisBottom(x).ticks(5)); // Add Y axis var y = d3.scaleLinear().domain([0, 200000]).range([height, 0]); - svg.append("g").call(d3.axisLeft(y)); + svg.append('g').call(d3.axisLeft(y)); // color palette var color = d3.scaleOrdinal().domain(keys).range(colors); @@ -60,15 +58,15 @@ function stackedArea(scaleType, colors) { // Show the areas svg - .selectAll("mylayers") + .selectAll('mylayers') .data(stackedData) .enter() - .append("path") - .style("fill", function (d) { + .append('path') + .style('fill', function (d) { return color(d.key); }) .attr( - "d", + 'd', d3 .area() .x(function (d, i) { @@ -79,11 +77,11 @@ function stackedArea(scaleType, colors) { }) .y1(function (d) { return y(d[1]); - }), + }) ); }); } module.exports = { - stackedArea, + stackedArea }; diff --git a/docs/ui/src/js/demos/demo_violinJitter.js b/docs/ui/src/js/demos/demo_violinJitter.js index 381e1737..a40fca4b 100644 --- a/docs/ui/src/js/demos/demo_violinJitter.js +++ b/docs/ui/src/js/demos/demo_violinJitter.js @@ -9,48 +9,41 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "../d3"; -import { _divergingScale } from "../initialDivergingScale"; -import { _sequentialScale } from "../initialSequentialScale"; +import d3 from '../d3'; +import {_divergingScale} from '../initialDivergingScale'; +import {_sequentialScale} from '../initialSequentialScale'; function violinJitter(scaleType) { - const colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; + const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; // set the dimensions and margins of the graph - var margin = { top: 10, right: 30, bottom: 30, left: 40 }, + var margin = {top: 10, right: 30, bottom: 30, left: 40}, width = 260 - margin.left - margin.right, height = 260 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3 .select(`#${scaleType}ViolinJitter`) - .append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .append("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + .append('svg') + .attr('width', width + margin.left + margin.right) + .attr('height', height + margin.top + margin.bottom) + .append('g') + .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); // Read the data and compute summary statistics for each specie - d3.csv( - "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", - ).then(function (data) { + d3.csv('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv').then(function (data) { // Build and Show the Y scale var y = d3 .scaleLinear() .domain([3.5, 8]) // Note that here the Y scale is set manually .range([height, 0]); - svg.append("g").call(d3.axisLeft(y)); + svg.append('g').call(d3.axisLeft(y)); // Build and Show the X scale. It is a band scale like for a boxplot: each group has an dedicated RANGE on the axis. This range has a length of x.bandwidth - var x = d3 - .scaleBand() - .range([0, width]) - .domain(["setosa", "versicolor", "virginica"]) - .padding(0.05); // This is important: it is the space between 2 groups. 0 means no padding. 1 is the maximum. + var x = d3.scaleBand().range([0, width]).domain(['setosa', 'versicolor', 'virginica']).padding(0.05); // This is important: it is the space between 2 groups. 0 means no padding. 1 is the maximum. svg - .append("g") - .attr("transform", "translate(0," + height + ")") + .append('g') + .attr('transform', 'translate(0,' + height + ')') .call(d3.axisBottom(x)); // Features of the histogram @@ -90,34 +83,28 @@ function violinJitter(scaleType) { } // The maximum width of a violin must be x.bandwidth = the width dedicated to a group - var xNum = d3 - .scaleLinear() - .range([0, x.bandwidth()]) - .domain([-maxNum, maxNum]); + var xNum = d3.scaleLinear().range([0, x.bandwidth()]).domain([-maxNum, maxNum]); // Color scale for dots - var myColor = d3 - .scaleSequential() - .interpolator(d3.interpolateInferno) - .domain([3, 9]); + var myColor = d3.scaleSequential().interpolator(d3.interpolateInferno).domain([3, 9]); // Add the shape to this svg! svg - .selectAll("myViolin") + .selectAll('myViolin') .data(sumstat) .enter() // So now we are working group per group - .append("g") - .attr("transform", function (d) { - return "translate(" + x(d.key) + " ,0)"; + .append('g') + .attr('transform', function (d) { + return 'translate(' + x(d.key) + ' ,0)'; }) // Translation on the right to be at the group position - .append("path") + .append('path') .datum(function (d) { return d.value; }) // So now we are working bin per bin - .style("stroke", "none") - .style("fill", "grey") + .style('stroke', 'none') + .style('fill', 'grey') .attr( - "d", + 'd', d3 .area() .x0(xNum(0)) @@ -127,30 +114,30 @@ function violinJitter(scaleType) { .y(function (d) { return y(d.x0); }) - .curve(d3.curveCatmullRom), // This makes the line smoother to give the violin appearance. Try d3.curveStep to see the difference + .curve(d3.curveCatmullRom) // This makes the line smoother to give the violin appearance. Try d3.curveStep to see the difference ); // Add individual points with jitter var jitterWidth = 40; svg - .selectAll("indPoints") + .selectAll('indPoints') .data(data) .enter() - .append("circle") - .attr("cx", function (d) { + .append('circle') + .attr('cx', function (d) { return x(d.Species) + x.bandwidth() / 2 - Math.random() * jitterWidth; }) - .attr("cy", function (d) { + .attr('cy', function (d) { return y(d.Sepal_Length); }) - .attr("r", 5) - .style("fill", function (d) { + .attr('r', 5) + .style('fill', function (d) { return myColor(d.Sepal_Length); }) - .attr("stroke", "white"); + .attr('stroke', 'white'); }); } module.exports = { - violinJitter, + violinJitter }; diff --git a/docs/ui/src/js/getThemeData.js b/docs/ui/src/js/getThemeData.js index 51fb3e9e..5117cf85 100644 --- a/docs/ui/src/js/getThemeData.js +++ b/docs/ui/src/js/getThemeData.js @@ -9,14 +9,14 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { getLightness } from "./utils"; -import { _theme, _colorScales } from "./initialTheme"; +import {getLightness} from './utils'; +import {_theme, _colorScales} from './initialTheme'; window.getColorClassById = getColorClassById; function getColorClassById(id) { let thisElement = document.getElementById(id); // 1. find color name from id - let colorNameInput = id.concat("_colorName"); + let colorNameInput = id.concat('_colorName'); let colorName = document.getElementById(colorNameInput).value; // 2. Scrape information from the color class of the same name @@ -34,7 +34,7 @@ function getColorClassByName(colorName) { // GET all contrast ratios function getContrastRatioInputs() { - let ratioInputs = document.getElementsByClassName("ratio-Field"); + let ratioInputs = document.getElementsByClassName('ratio-Field'); let ratios = []; for (let i = 0; i < ratioInputs.length; i++) { ratios.push(ratioInputs[i].value); @@ -70,7 +70,7 @@ function getLuminosities() { function getThemeName() { // Get name - let themeNameInput = document.getElementById("themeNameInput"); + let themeNameInput = document.getElementById('themeNameInput'); let themeName = themeNameInput.value; return themeName; } @@ -86,7 +86,7 @@ function getThemeData() { baseScale: baseSelectValue, colorScales: colorScales, brightness: brightness, - contrast: contrast, + contrast: contrast }; } @@ -102,7 +102,7 @@ function getAllColorKeys() { }); return colorKeys; - } else throw new Error("No color scales defined"); + } else throw new Error('No color scales defined'); } function getAllColorNames() { @@ -121,5 +121,5 @@ module.exports = { getAllColorNames, getLuminosities, getColorClassByName, - getAllColorKeys, + getAllColorKeys }; diff --git a/docs/ui/src/js/initialDivergingScale.js b/docs/ui/src/js/initialDivergingScale.js index 712e21bd..f0f31d21 100644 --- a/docs/ui/src/js/initialDivergingScale.js +++ b/docs/ui/src/js/initialDivergingScale.js @@ -9,26 +9,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import * as d3 from "./d3"; -import { SequentialScale } from "./initialSequentialScale"; -import { convertColorValue, round, orderColorsByLuminosity } from "./utils"; -const chroma = require("chroma-js"); -const { extendChroma } = require("./chroma-plus"); +import * as Leo from '@adobe/leonardo-contrast-colors'; +import * as d3 from './d3'; +import {SequentialScale} from './initialSequentialScale'; +import {convertColorValue, round, orderColorsByLuminosity} from './utils'; +const chroma = require('chroma-js'); +const {extendChroma} = require('./chroma-plus'); extendChroma(chroma); class DivergingScale { - constructor({ - swatches, - startKeys, - endKeys, - middleKey, - colorspace, - smooth, - distributeLightness = "polynomial", - shift = 1, - output, - }) { + constructor({swatches, startKeys, endKeys, middleKey, colorspace, smooth, distributeLightness = 'polynomial', shift = 1, output}) { this._startKeys = startKeys; this._endKeys = endKeys; this._middleKey = middleKey; @@ -47,7 +37,7 @@ class DivergingScale { distributeLightness: this._distributeLightness, smooth: this._smooth, shift: this._shift, - output: this._output, + output: this._output })); this._endScale = new SequentialScale({ @@ -57,7 +47,7 @@ class DivergingScale { distributeLightness: this._distributeLightness, smooth: this._smooth, shift: this._shift, - output: this._output, + output: this._output }); this._domains = this._getDomains(); @@ -248,9 +238,9 @@ class DivergingScale { colorspace: this._colorspace, sortColor: false, - distributeLightness: "linear", + distributeLightness: 'linear', fullScale: false, - asFun: true, + asFun: true }); newColors.map((c) => { @@ -261,18 +251,14 @@ class DivergingScale { } _getLuminosities() { - return [ - ...this._startScale.luminosities, - d3.hsluv(this._middleKey).v, - ...this._endScale.luminosities, - ]; + return [...this._startScale.luminosities, d3.hsluv(this._middleKey).v, ...this._endScale.luminosities]; } _combineColorKeys() { const startKeys = this._startKeys; const endKeys = this._endKeys; - const sortedStartKeys = orderColorsByLuminosity(startKeys, "toDark"); - const sortedEndKeys = orderColorsByLuminosity(endKeys, "toLight"); + const sortedStartKeys = orderColorsByLuminosity(startKeys, 'toDark'); + const sortedEndKeys = orderColorsByLuminosity(endKeys, 'toLight'); return [...sortedStartKeys, this._middleKey, ...sortedEndKeys]; } @@ -325,17 +311,17 @@ class DivergingScale { let _divergingScale = new DivergingScale({ swatches: 50, - startKeys: ["#580000", "#DD8629"], - endKeys: ["#3EA8A6", "#003233"], - middleKey: "#FFFFE0", - colorspace: "CAM02", - distributeLightness: "polynomial", // 'linear' | 'parabolic' | 'polynomial' + startKeys: ['#580000', '#DD8629'], + endKeys: ['#3EA8A6', '#003233'], + middleKey: '#FFFFE0', + colorspace: 'CAM02', + distributeLightness: 'polynomial', // 'linear' | 'parabolic' | 'polynomial' smooth: false, - output: "RGB", + output: 'RGB' }); window._divergingScale = _divergingScale; module.exports = { - _divergingScale, + _divergingScale }; diff --git a/docs/ui/src/js/initialQualitativeScale.js b/docs/ui/src/js/initialQualitativeScale.js index cd9861b3..718fd67f 100644 --- a/docs/ui/src/js/initialQualitativeScale.js +++ b/docs/ui/src/js/initialQualitativeScale.js @@ -9,13 +9,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { convertColorValue } from "./utils"; -const chroma = require("chroma-js"); -const { extendChroma } = require("./chroma-plus"); +import {convertColorValue} from './utils'; +const chroma = require('chroma-js'); +const {extendChroma} = require('./chroma-plus'); extendChroma(chroma); class QualitativeScale { - constructor({ sampleColors, keeperColors, output, cvdSupport }) { + constructor({sampleColors, keeperColors, output, cvdSupport}) { this._sampleColors = sampleColors; this._keeperColors = keeperColors; this._output = output; @@ -55,76 +55,76 @@ class QualitativeScale { let _qualitativeScale = new QualitativeScale({ sampleColors: [ - "#ff7d67", - "#e83326", - "#ac0000", - "#680000", - "#f98517", - "#c85b00", - "#903900", - "#561e01", - "#c6a000", - "#997600", - "#6c4f00", - "#412c00", - "#72b622", - "#4f890e", - "#355e07", - "#1e3604", - "#33b983", - "#008c5c", - "#00603d", - "#0e3724", - "#5ba8f7", - "#1077f3", - "#0050ae", - "#002f64", - "#bf8cfc", - "#9b54f3", - "#7018d3", - "#3d137d", - "#ee74ee", - "#cc34cd", - "#970098", - "#551153", - "#ff7d67", - "#e83326", - "#ac0000", - "#680000", - "#f98517", - "#c85b00", - "#903900", - "#561e01", - "#c6a000", - "#997600", - "#6c4f00", - "#412c00", - "#72b622", - "#4f890e", - "#355e07", - "#1e3604", - "#33b983", - "#008c5c", - "#00603d", - "#0e3724", - "#5ba8f7", - "#1077f3", - "#0050ae", - "#002f64", - "#bf8cfc", - "#9b54f3", - "#7018d3", - "#3d137d", - "#ee74ee", - "#cc34cd", - "#970098", - "#551153", + '#ff7d67', + '#e83326', + '#ac0000', + '#680000', + '#f98517', + '#c85b00', + '#903900', + '#561e01', + '#c6a000', + '#997600', + '#6c4f00', + '#412c00', + '#72b622', + '#4f890e', + '#355e07', + '#1e3604', + '#33b983', + '#008c5c', + '#00603d', + '#0e3724', + '#5ba8f7', + '#1077f3', + '#0050ae', + '#002f64', + '#bf8cfc', + '#9b54f3', + '#7018d3', + '#3d137d', + '#ee74ee', + '#cc34cd', + '#970098', + '#551153', + '#ff7d67', + '#e83326', + '#ac0000', + '#680000', + '#f98517', + '#c85b00', + '#903900', + '#561e01', + '#c6a000', + '#997600', + '#6c4f00', + '#412c00', + '#72b622', + '#4f890e', + '#355e07', + '#1e3604', + '#33b983', + '#008c5c', + '#00603d', + '#0e3724', + '#5ba8f7', + '#1077f3', + '#0050ae', + '#002f64', + '#bf8cfc', + '#9b54f3', + '#7018d3', + '#3d137d', + '#ee74ee', + '#cc34cd', + '#970098', + '#551153' ], keeperColors: [], - output: "HEX", - cvdSupport: ["protanopia", "deuteranopia", "tritanopia", "achromatopsia"], + output: 'HEX', + cvdSupport: ['protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'] }); module.exports = { - _qualitativeScale, + _qualitativeScale }; diff --git a/docs/ui/src/js/initialSequentialScale.js b/docs/ui/src/js/initialSequentialScale.js index 50d802eb..6549c3eb 100644 --- a/docs/ui/src/js/initialSequentialScale.js +++ b/docs/ui/src/js/initialSequentialScale.js @@ -9,29 +9,15 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import { - convertColorValue, - makePowScale, - round, - findMatchingLuminosity, - orderColorsByLuminosity, -} from "./utils"; -const chroma = require("chroma-js"); -const { extendChroma } = require("./chroma-plus"); +import * as Leo from '@adobe/leonardo-contrast-colors'; +import {convertColorValue, makePowScale, round, findMatchingLuminosity, orderColorsByLuminosity} from './utils'; +const chroma = require('chroma-js'); +const {extendChroma} = require('./chroma-plus'); extendChroma(chroma); class SequentialScale { - constructor({ - swatches, - colorKeys, - colorspace, - smooth, - distributeLightness = "linear", - shift, - output, - }) { + constructor({swatches, colorKeys, colorspace, smooth, distributeLightness = 'linear', shift, output}) { (this._swatches = swatches), (this._colorKeys = colorKeys); this._luminosities = this._getLuminosities(); this._colorspace = colorspace; @@ -153,7 +139,7 @@ class SequentialScale { let lumsObj = this._colorKeys.map((c) => { return { color: c, - lum: chroma(c).jch()[0], + lum: chroma(c).jch()[0] }; }); lumsObj.sort((a, b) => (a.lum < b.lum ? 1 : -1)); @@ -166,11 +152,7 @@ class SequentialScale { if (this._colorsReversed) this._colorsReversed = null; let colorScale; - let generousColorLength = - this._distributeLightness === "parabolic" || - this._distributeLightness === "polynomial" - ? 100 - : 12; + let generousColorLength = this._distributeLightness === 'parabolic' || this._distributeLightness === 'polynomial' ? 100 : 12; let initialColorScale = Leo.createScale({ swatches: generousColorLength, colorKeys: this._colorKeys, @@ -179,7 +161,7 @@ class SequentialScale { distributeLightness: this._distributeLightness, smooth: this._smooth, fullScale: false, - asFun: true, + asFun: true }); const minLum = Math.min(...this._luminosities); @@ -196,24 +178,15 @@ class SequentialScale { let newLums = dataX.map((i) => round(maxLumShifted * i + minLum, 2)); - let newColors = findMatchingLuminosity( - initialColorScale, - generousColorLength, - newLums, - this._smooth, - ); + let newColors = findMatchingLuminosity(initialColorScale, generousColorLength, newLums, this._smooth); newColors = [...new Set(newColors)]; const lastColorIndex = newColors.length - 1; // Manually ensure first and last user-input key colors // are part of new key colors array being passed to the // new color scale. - const first = this._smooth - ? chroma(initialColorScale(0)) - : initialColorScale(0); - const last = this._smooth - ? chroma(initialColorScale(generousColorLength)) - : initialColorScale(generousColorLength); + const first = this._smooth ? chroma(initialColorScale(0)) : initialColorScale(0); + const last = this._smooth ? chroma(initialColorScale(generousColorLength)) : initialColorScale(generousColorLength); newColors.splice(0, 1, first.hex()); newColors.splice(lastColorIndex, 1); newColors.splice(lastColorIndex, 1, last.hex()); @@ -226,7 +199,7 @@ class SequentialScale { smooth: false, distributeLightness: this._distributeLightness, fullScale: false, - asFun: true, + asFun: true }); colorScale = Leo.createScale({ @@ -237,15 +210,15 @@ class SequentialScale { smooth: false, distributeLightness: this._distributeLightness, fullScale: false, - asFun: false, + asFun: false }); let formattedColors = colorScale.map((c) => { return convertColorValue(c, this._output); }); - this._colorsReversed = orderColorsByLuminosity(formattedColors, "toLight"); + this._colorsReversed = orderColorsByLuminosity(formattedColors, 'toLight'); - let reversedColor = orderColorsByLuminosity(formattedColors, "toDark"); + let reversedColor = orderColorsByLuminosity(formattedColors, 'toDark'); return reversedColor; } @@ -263,7 +236,7 @@ class SequentialScale { let sqrtDomains = makePowScale(Number(inverseShift)); let domains; - if (this._distributeLightness === "parabolic") { + if (this._distributeLightness === 'parabolic') { const parabola = (x) => { return Math.pow(x, 2); }; @@ -275,7 +248,7 @@ class SequentialScale { }); domains = newDomains; } - if (this._distributeLightness === "polynomial") { + if (this._distributeLightness === 'polynomial') { // Equation based on polynomial mapping of lightness values in CIECAM02 // New polynomial from more expansive analysis of RgBu lightness // Inverse of actual function in order to present dots in proper location. @@ -292,7 +265,7 @@ class SequentialScale { }); domains = newDomains; } - if (this._distributeLightness === "linear") { + if (this._distributeLightness === 'linear') { domains = percLums.map((d) => { return sqrtDomains(d); }); @@ -305,17 +278,17 @@ class SequentialScale { let _sequentialScale = new SequentialScale({ swatches: 100, - colorKeys: ["#002f61", "#ffff00"], - colorspace: "CAM02p", + colorKeys: ['#002f61', '#ffff00'], + colorspace: 'CAM02p', smooth: false, - distributeLightness: "linear", + distributeLightness: 'linear', shift: 1, - output: "RGB", + output: 'RGB' }); window._sequentialScale = _sequentialScale; module.exports = { SequentialScale, - _sequentialScale, + _sequentialScale }; diff --git a/docs/ui/src/js/initialTheme.js b/docs/ui/src/js/initialTheme.js index 55928fa0..9e723213 100644 --- a/docs/ui/src/js/initialTheme.js +++ b/docs/ui/src/js/initialTheme.js @@ -9,14 +9,14 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; +import * as Leo from '@adobe/leonardo-contrast-colors'; const tempGray = new Leo.BackgroundColor({ - name: "Gray", - colorKeys: ["#000000"], - colorspace: "RGB", + name: 'Gray', + colorKeys: ['#000000'], + colorspace: 'RGB', ratios: [3.2, 4.5], - output: "HEX", + output: 'HEX' }); let _theme = new Leo.Theme({ @@ -25,12 +25,12 @@ let _theme = new Leo.Theme({ lightness: 100, contrast: 1, saturation: 100, - output: "HEX", + output: 'HEX' }); window._theme = _theme; module.exports = { tempGray, - _theme, + _theme }; diff --git a/docs/ui/src/js/keyColors.js b/docs/ui/src/js/keyColors.js index 03fc2d98..9478a401 100644 --- a/docs/ui/src/js/keyColors.js +++ b/docs/ui/src/js/keyColors.js @@ -9,34 +9,32 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import d3 from "./d3"; -import { randomId } from "./utils"; -import { updateRamps } from "./ramps"; -import { updateColorDots } from "./colorWheel"; -import { themeUpdateParams } from "./themeUpdate"; -import { throttle } from "./utils"; -import { getColorClassById } from "./getThemeData"; -import { create3dModel } from "./create3dModel"; -import { _theme } from "./initialTheme"; -import { createDetailOutputColors } from "./createOutputColors"; +import d3 from './d3'; +import {randomId} from './utils'; +import {updateRamps} from './ramps'; +import {updateColorDots} from './colorWheel'; +import {themeUpdateParams} from './themeUpdate'; +import {throttle} from './utils'; +import {getColorClassById} from './getThemeData'; +import {create3dModel} from './create3dModel'; +import {_theme} from './initialTheme'; +import {createDetailOutputColors} from './createOutputColors'; function addKeyColorInput(c, thisId = this.id, currentColorName, index) { - let parent = thisId.replace("_addKeyColor", ""); - let destId = parent.concat("_keyColors"); + let parent = thisId.replace('_addKeyColor', ''); + let destId = parent.concat('_keyColors'); let dest = document.getElementById(destId); - let div = document.createElement("div"); + let div = document.createElement('div'); let randId = randomId(); - div.className = "keyColor"; - div.id = randId + "-item"; - let sw = document.createElement("input"); - sw.type = "color"; + div.className = 'keyColor'; + div.id = randId + '-item'; + let sw = document.createElement('input'); + sw.type = 'color'; sw.value = c; - const currentColorIndex = _theme.colors - .map((e) => e.name) - .indexOf(currentColorName); - const chartsModeSelect = document.getElementById("chartsMode"); + const currentColorIndex = _theme.colors.map((e) => e.name).indexOf(currentColorName); + const chartsModeSelect = document.getElementById('chartsMode'); const currentColor = _theme.colors[currentColorIndex]; sw.oninput = (e) => { @@ -45,57 +43,52 @@ function addKeyColorInput(c, thisId = this.id, currentColorName, index) { let currentColorName = _theme.colors[currentColorIndex].name; currentKeys.splice(index, 1, e.target.value); - _theme.updateColor = { color: currentColorName, colorKeys: currentKeys }; + _theme.updateColor = {color: currentColorName, colorKeys: currentKeys}; throttle(updateRamps(currentColor, parent), 10); throttle(createDetailOutputColors(currentColorName), 10); setTimeout(function () { - updateColorDots( - chartsModeSelect.value, - "colorScale", - currentKeys, - parent, - ); + updateColorDots(chartsModeSelect.value, 'colorScale', currentKeys, parent); }, 500); }; const updateModel = () => { - create3dModel("tabModelContent", [currentColor], chartsModeSelect.value); + create3dModel('tabModelContent', [currentColor], chartsModeSelect.value); }; - sw.addEventListener("input", throttle(updateModel, 50)); + sw.addEventListener('input', throttle(updateModel, 50)); - sw.className = "keyColor-Item"; - sw.id = randId + "-sw"; + sw.className = 'keyColor-Item'; + sw.id = randId + '-sw'; sw.style.backgroundColor = c; - let button = document.createElement("button"); - button.className = "spectrum-ActionButton spectrum-ActionButton--sizeM"; + let button = document.createElement('button'); + button.className = 'spectrum-ActionButton spectrum-ActionButton--sizeM'; button.innerHTML = ` `; - button.addEventListener("click", function (e) { + button.addEventListener('click', function (e) { // Remove current indexed value from color keys let currentColor = _theme.colors[currentColorIndex]; let currentKeys = currentColor.colorKeys; currentKeys.splice(index, 1); - _theme.updateColor = { color: currentColorName, colorKeys: currentKeys }; + _theme.updateColor = {color: currentColorName, colorKeys: currentKeys}; updateRamps(currentColor, parent); - let contentArea = document.getElementById("colorDetails"); + let contentArea = document.getElementById('colorDetails'); - let configPanel = document.getElementById("colorConfigPanel"); + let configPanel = document.getElementById('colorConfigPanel'); - contentArea.innerHTML = " "; - contentArea.style.display = "none"; - configPanel.innerHTML = " "; - configPanel.style.display = "none"; + contentArea.innerHTML = ' '; + contentArea.style.display = 'none'; + configPanel.innerHTML = ' '; + configPanel.style.display = 'none'; - let triggerId = parent.concat("-toggleConfig"); + let triggerId = parent.concat('-toggleConfig'); let trigger = document.getElementById(triggerId); trigger.click(); @@ -109,9 +102,9 @@ function addKeyColorInput(c, thisId = this.id, currentColorName, index) { function addKeyColor(e) { let thisId = e.target.id; - let parentId = thisId.replace("_addKeyColor", ""); + let parentId = thisId.replace('_addKeyColor', ''); - let currentColorNameInput = parentId.concat("_colorName2"); + let currentColorNameInput = parentId.concat('_colorName2'); let currentColorName = document.getElementById(currentColorNameInput).value; let currentColor = _theme.colors.filter((entry) => { @@ -122,27 +115,21 @@ function addKeyColor(e) { let lastIndex = currentColor.colorKeys.length; if (!lastIndex) lastIndex = 0; - let lastColor = - lastIndex > 0 - ? d3.hsluv(currentColor.colorKeys[lastIndex - 1]) - : d3.hsluv(currentColor.colorKeys[0]); + let lastColor = lastIndex > 0 ? d3.hsluv(currentColor.colorKeys[lastIndex - 1]) : d3.hsluv(currentColor.colorKeys[0]); let lastColorLightness = lastColor.v; let fCtintHalf = (100 - lastColorLightness) / 3 + lastColorLightness; let fCshadeHalf = lastColorLightness / 2; - let c = - lastColorLightness >= 50 - ? d3.hsluv(lastColor.l, lastColor.u, fCshadeHalf) - : d3.hsluv(lastColor.l, lastColor.u, fCtintHalf); + let c = lastColorLightness >= 50 ? d3.hsluv(lastColor.l, lastColor.u, fCshadeHalf) : d3.hsluv(lastColor.l, lastColor.u, fCtintHalf); c = d3.rgb(c).formatHex(); currentKeys.push(c); // Update color class arguments via the theme class - _theme.updateColor = { color: currentColorName, colorKeys: currentKeys }; + _theme.updateColor = {color: currentColorName, colorKeys: currentKeys}; addKeyColorInput(c, thisId, currentColorName, lastIndex); // Update gradient updateRamps(currentColor, parentId); - updateColorDots(null, "theme"); + updateColorDots(null, 'theme'); createDetailOutputColors(currentColorName); } @@ -157,16 +144,16 @@ function deleteColor(e) { function clearAllColors(e) { let targetId = e.target.id; - let parentId = targetId.replace("_clearAllColors", ""); - let keyColorsId = targetId.replace("_clearAllColors", "_keyColors"); - document.getElementById(keyColorsId).innerHTML = " "; + let parentId = targetId.replace('_clearAllColors', ''); + let keyColorsId = targetId.replace('_clearAllColors', '_keyColors'); + document.getElementById(keyColorsId).innerHTML = ' '; const currentColor = getColorClassById(parentId); - addKeyColorInput("#000000", parentId, currentColor.name, 0); - _theme.updateColor = { color: currentColor.name, colorKeys: ["#000000"] }; + addKeyColorInput('#000000', parentId, currentColor.name, 0); + _theme.updateColor = {color: currentColor.name, colorKeys: ['#000000']}; updateRamps(currentColor, parentId); - updateColorDots(null, "theme"); + updateColorDots(null, 'theme'); themeUpdateParams(); } @@ -176,5 +163,5 @@ module.exports = { addKeyColor, deleteColor, addKeyColorInput, - clearAllColors, + clearAllColors }; diff --git a/docs/ui/src/js/pageLoader.js b/docs/ui/src/js/pageLoader.js index 8aef035a..bb206eb6 100644 --- a/docs/ui/src/js/pageLoader.js +++ b/docs/ui/src/js/pageLoader.js @@ -10,8 +10,8 @@ governing permissions and limitations under the License. */ function pageLoader() { - const loader = document.getElementById("pageLoader"); - const page = document.getElementById("page"); + const loader = document.getElementById('pageLoader'); + const page = document.getElementById('page'); setTimeout(() => { page.style.opacity = 1; }, 50); @@ -25,5 +25,5 @@ function pageLoader() { } module.exports = { - pageLoader, + pageLoader }; diff --git a/docs/ui/src/js/params.js b/docs/ui/src/js/params.js index 6adf0597..add5158f 100644 --- a/docs/ui/src/js/params.js +++ b/docs/ui/src/js/params.js @@ -9,39 +9,36 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import { addColorScale } from "./colorScale"; -import { addRatioInputs, sortRatios } from "./ratios"; -import { - getRandomColorName, - getClosestColorName, -} from "./predefinedColorNames"; -import { baseScaleOptions } from "./createBaseScaleOptions"; -import { round } from "./utils"; -import { _theme, tempGray } from "./initialTheme"; +import * as Leo from '@adobe/leonardo-contrast-colors'; +import {addColorScale} from './colorScale'; +import {addRatioInputs, sortRatios} from './ratios'; +import {getRandomColorName, getClosestColorName} from './predefinedColorNames'; +import {baseScaleOptions} from './createBaseScaleOptions'; +import {round} from './utils'; +import {_theme, tempGray} from './initialTheme'; function paramSetup() { let setFirstColorSmoothing = false; let url = new URL(window.location); let params = new URLSearchParams(url.search.slice(1)); - let themeBase = document.getElementById("themeBase"); + let themeBase = document.getElementById('themeBase'); let RATIOS; let RATIOCOLORS; - let themeNameInput = document.getElementById("themeNameInput"); - if (params.has("name")) { - themeNameInput.value = params.get("name").toString(); - let characters = params.get("name").toString().length; + let themeNameInput = document.getElementById('themeNameInput'); + if (params.has('name')) { + themeNameInput.value = params.get('name').toString(); + let characters = params.get('name').toString().length; themeNameInput.style.width = `${characters + 4}ch`; } else { - themeNameInput.value = "Untitled"; - let characters = "Untitled".length; + themeNameInput.value = 'Untitled'; + let characters = 'Untitled'.length; themeNameInput.style.width = `${characters + 4}ch`; } // updateThemeTitle(); - if (params.has("config") && params.get("config") !== undefined) { - let configParam = params.get("config"); + if (params.has('config') && params.get('config') !== undefined) { + let configParam = params.get('config'); let config = JSON.parse(configParam); let colorScales = config.colorScales; let baseScale = config.baseScale; @@ -50,7 +47,7 @@ function paramSetup() { let contrast; let formula; if (!config.formula) { - formula = "wcag2"; + formula = 'wcag2'; } else { formula = config.formula; } @@ -71,9 +68,8 @@ function paramSetup() { let colorSpace = color.colorspace; let ratios = color.ratios; let smooth = i === 0 ? false : color.smooth; - if (color.smooth === "true") { - if (color.colorspace === "OKLAB" || color.colorspace === "OKLCH") - setFirstColorSmoothing = true; + if (color.smooth === 'true') { + if (color.colorspace === 'OKLAB' || color.colorspace === 'OKLCH') setFirstColorSmoothing = true; } // Create color scale item @@ -82,7 +78,7 @@ function paramSetup() { colorKeys: keyColors, colorspace: colorSpace, ratios: ratios, - smooth: smooth, + smooth: smooth }); addColorScale(newColor); @@ -99,21 +95,21 @@ function paramSetup() { RATIOCOLORS = Promise.resolve( _theme.contrastColors[1].values.map((c) => { return c.value; - }), + }) ); } else { } - let slider = document.getElementById("themeBrightnessSlider"); - let sliderVal = document.getElementById("themeBrightnessValue"); + let slider = document.getElementById('themeBrightnessSlider'); + let sliderVal = document.getElementById('themeBrightnessValue'); if (lightness === undefined) lightness = 0; _theme.lightness = lightness; slider.value = lightness; sliderVal.innerHTML = lightness; - let contrastSlider = document.getElementById("themeContrastSlider"); - let contrastSliderVal = document.getElementById("themeContrastValue"); + let contrastSlider = document.getElementById('themeContrastSlider'); + let contrastSliderVal = document.getElementById('themeContrastValue'); contrastSlider.value = contrast; contrastSliderVal.innerHTML = `${round(contrast * 100)}%`; _theme.contrast = contrast; @@ -129,50 +125,45 @@ function paramSetup() { }) .then(() => { setTimeout(() => { - document.getElementById("themeWCAG").value = formula; - let label = document.getElementById("ratioInputLabel"); - label.innerHTML = - formula === "wcag2" - ? "WCAG 2 contrast" - : formula === "wcag3" - ? "APCA contrast" - : "Contrast"; + document.getElementById('themeWCAG').value = formula; + let label = document.getElementById('ratioInputLabel'); + label.innerHTML = formula === 'wcag2' ? 'WCAG 2 contrast' : formula === 'wcag3' ? 'APCA contrast' : 'Contrast'; sortRatios(); }, 500); }); - } else if (params.has("colorKeys")) { + } else if (params.has('colorKeys')) { // old way used #, but now it's seen as a hash. // Have to replace # with character code and reset URL if (window.location.hash) { let hash = window.location.hash.toString(); // let newParam = hash.replaceAll(`#`, `%23`).replaceAll(`,`, `%54`); - let paramArray = hash.split("&"); + let paramArray = hash.split('&'); // console.log(paramArray) - let paramOptions = ["base", "mode", "ratios"]; + let paramOptions = ['base', 'mode', 'ratios']; paramArray.map((p) => { for (let i = 0; i < paramOptions.length; i++) { if (p.includes(paramOptions[i])) { // strip string to reveal parameters - let value = p.replace(`${paramOptions[i]}=`, ""); + let value = p.replace(`${paramOptions[i]}=`, ''); params.set(`${paramOptions[i]}`, value); } } }); - params.set("colorKeys", paramArray[0]); - window.history.replaceState({}, "", "?" + params); // update the page's URL. + params.set('colorKeys', paramArray[0]); + window.history.replaceState({}, '', '?' + params); // update the page's URL. } - let colorKeys = Promise.resolve(params.get("colorKeys").split(",")); - let colorspace = Promise.resolve(params.get("mode")); + let colorKeys = Promise.resolve(params.get('colorKeys').split(',')); + let colorspace = Promise.resolve(params.get('mode')); let ratios = Promise.resolve( params - .get("ratios") - .split(",") + .get('ratios') + .split(',') .map((r) => { return Number(r); - }), + }) ); Promise.all([colorKeys, colorspace, ratios]) @@ -183,7 +174,7 @@ function paramSetup() { colorKeys: values[0], colorspace: values[1], ratios: values[2], - smooth: false, + smooth: false }); let length = _theme.colors.length; for (let i = 0; i < length; i++) { @@ -196,14 +187,14 @@ function paramSetup() { }) .then(() => { // Update default gray to input ratios - _theme.updateParams = { name: _theme.colors[0].name, ratios: RATIOS }; + _theme.updateParams = {name: _theme.colors[0].name, ratios: RATIOS}; }) .then(() => { setTimeout(() => { RATIOCOLORS = Promise.resolve( _theme.contrastColors[1].values.map((c) => { return c.value; - }), + }) ); RATIOCOLORS.then((resolve) => { // console.log(resolve) @@ -216,15 +207,8 @@ function paramSetup() { sortRatios(); }, 500); }); - } else if ( - !params.has("config") || - params.get("config") === undefined || - !params.has("colorKeys") - ) { - addRatioInputs( - [1.45, 2.05, 3.02, 4.54, 7, 10.86], - ["#d6d6d6", "#b5b5b5", "#8a8a8a", "#767676", "#595959", "#3d3d3d"], - ); + } else if (!params.has('config') || params.get('config') === undefined || !params.has('colorKeys')) { + addRatioInputs([1.45, 2.05, 3.02, 4.54, 7, 10.86], ['#d6d6d6', '#b5b5b5', '#8a8a8a', '#767676', '#595959', '#3d3d3d']); let length = _theme.colors.length; for (let i = 0; i < length; i++) { // add color scale to UI from the default theme, @@ -242,7 +226,7 @@ function paramSetup() { setTimeout(() => { if (setFirstColorSmoothing) { let firstColorName = _theme.colors[0].name; - _theme.updateColor = { name: firstColorName, smooth: "true" }; + _theme.updateColor = {name: firstColorName, smooth: 'true'}; } themeUpdate(); }, 200); @@ -251,12 +235,12 @@ function paramSetup() { function clearParams() { let uri = window.location.toString(); - let cleanURL = uri.substring(0, uri.indexOf("?")); + let cleanURL = uri.substring(0, uri.indexOf('?')); window.history.replaceState({}, document.title, cleanURL); } module.exports = { paramSetup, - clearParams, + clearParams }; diff --git a/docs/ui/src/js/polarColorPath.js b/docs/ui/src/js/polarColorPath.js index f0c814f4..2077e825 100644 --- a/docs/ui/src/js/polarColorPath.js +++ b/docs/ui/src/js/polarColorPath.js @@ -9,29 +9,24 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as d3 from "d3"; +import * as d3 from 'd3'; function polarColorPath(data, size, scaleType) { const chartWidth = size; const chartHeight = size; - const dest = - scaleType === "theme" ? "#colorWheelPaths" : `#${scaleType}ColorWheelPaths`; + const dest = scaleType === 'theme' ? '#colorWheelPaths' : `#${scaleType}ColorWheelPaths`; const yMin = 0; const yMax = chartHeight; // might be wrong variable... - let xy_chart = d3_xy_chart() - .width(chartWidth) - .height(chartHeight) - .xlabel("xLabel") - .ylabel("yLabel"); + let xy_chart = d3_xy_chart().width(chartWidth).height(chartHeight).xlabel('xLabel').ylabel('yLabel'); - let svg = d3.select(dest).append("svg").datum(data).call(xy_chart); + let svg = d3.select(dest).append('svg').datum(data).call(xy_chart); function d3_xy_chart() { let width = chartWidth, height = chartHeight, - xlabel = "X Axis Label", - ylabel = "Y Axis Label"; + xlabel = 'X Axis Label', + ylabel = 'Y Axis Label'; function chart(selection) { selection.each(function (datasets) { @@ -50,26 +45,20 @@ function polarColorPath(data, size, scaleType) { { x: dataX, y: dataY, - color: dataColor, - }, + color: dataColor + } ]; - let margin = { top: 0, right: 0, bottom: 0, left: 0 }; + let margin = {top: 0, right: 0, bottom: 0, left: 0}; let innerwidth = width - margin.left - margin.right; let innerheight = height - margin.top - margin.bottom; - let x_scale = d3 - .scaleLinear() - .range([0, innerwidth]) - .domain([yMin, yMax]); + let x_scale = d3.scaleLinear().range([0, innerwidth]).domain([yMin, yMax]); - let y_scale = d3 - .scaleLinear() - .range([innerheight, 0]) - .domain([yMin, yMax]); + let y_scale = d3.scaleLinear().range([innerheight, 0]).domain([yMin, yMax]); - let color = "#ffffff"; + let color = '#ffffff'; let draw_line = d3 .line() @@ -83,33 +72,30 @@ function polarColorPath(data, size, scaleType) { let svg = d3 .select(this) - .attr("width", width) - .attr("height", height) - .append("g") - .attr( - "transform", - "translate(" + margin.left + "," + margin.top + ")", - ); + .attr('width', width) + .attr('height', height) + .append('g') + .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); let data_lines = svg - .selectAll(".d3_xy_chart_line") + .selectAll('.d3_xy_chart_line') .data( datasets.map(function (d) { return d3.zip(d.x, d.y); - }), + }) ) .enter() - .append("g") - .attr("class", "d3_xy_chart_line"); + .append('g') + .attr('class', 'd3_xy_chart_line'); data_lines - .append("path") - .attr("class", "line") - .attr("d", function (d) { + .append('path') + .attr('class', 'line') + .attr('d', function (d) { return draw_line(d); }) - .attr("stroke", color) - .attr("filter", "drop-shadow( 0 0 1px rgba(0, 0, 0, .5))"); + .attr('stroke', color) + .attr('filter', 'drop-shadow( 0 0 1px rgba(0, 0, 0, .5))'); }); } @@ -142,5 +128,5 @@ function polarColorPath(data, size, scaleType) { } module.exports = { - polarColorPath, + polarColorPath }; diff --git a/docs/ui/src/js/popover.js b/docs/ui/src/js/popover.js index 6fd8a31a..047160c0 100644 --- a/docs/ui/src/js/popover.js +++ b/docs/ui/src/js/popover.js @@ -13,11 +13,11 @@ function togglePopover(e) { let thisId = e.target.id; let baseId; - if (thisId.includes("button")) { - baseId = thisId.replace("button", ""); + if (thisId.includes('button')) { + baseId = thisId.replace('button', ''); } - if (thisId.includes("close")) { - baseId = thisId.replace("close", ""); + if (thisId.includes('close')) { + baseId = thisId.replace('close', ''); } let targetId = `popover`.concat(baseId); @@ -26,53 +26,41 @@ function togglePopover(e) { let button = document.getElementById(buttonId); let popover = document.getElementById(targetId); - if (popover.classList.contains("is-open")) { - popover.classList.remove("is-open"); - button.classList.remove("is-selected"); + if (popover.classList.contains('is-open')) { + popover.classList.remove('is-open'); + button.classList.remove('is-selected'); } else { - popover.classList.add("is-open"); - button.classList.add("is-selected"); + popover.classList.add('is-open'); + button.classList.add('is-selected'); } // Remove open/selection states from all other buttons and popovers - let popovers = document.getElementsByClassName("spectrum-Popover"); - let buttons = document.getElementsByClassName("spectrum-Popover-trigger"); + let popovers = document.getElementsByClassName('spectrum-Popover'); + let buttons = document.getElementsByClassName('spectrum-Popover-trigger'); for (i = 0; i < popovers.length; i++) { if (popovers[i].id !== targetId) { - popovers[i].classList.remove("is-open"); + popovers[i].classList.remove('is-open'); } } for (i = 0; i < buttons.length; i++) { if (buttons[i].id !== buttonId) { - buttons[i].classList.remove("is-selected"); + buttons[i].classList.remove('is-selected'); } } } window.togglePopover = togglePopover; -document - .getElementById("buttonAdaptiveControls") - .addEventListener("click", togglePopover); -document - .getElementById("closeAdaptiveControls") - .addEventListener("click", togglePopover); +document.getElementById('buttonAdaptiveControls').addEventListener('click', togglePopover); +document.getElementById('closeAdaptiveControls').addEventListener('click', togglePopover); -document - .getElementById("buttonAnalysisColorSpace") - .addEventListener("click", togglePopover); -document - .getElementById("closeAnalysisColorSpace") - .addEventListener("click", togglePopover); +document.getElementById('buttonAnalysisColorSpace').addEventListener('click', togglePopover); +document.getElementById('closeAnalysisColorSpace').addEventListener('click', togglePopover); -document - .getElementById("buttonShareOptions") - .addEventListener("click", togglePopover); -document - .getElementById("closeShareOptions") - .addEventListener("click", togglePopover); +document.getElementById('buttonShareOptions').addEventListener('click', togglePopover); +document.getElementById('closeShareOptions').addEventListener('click', togglePopover); module.exports = { - togglePopover, + togglePopover }; diff --git a/docs/ui/src/js/predefinedColorNames.js b/docs/ui/src/js/predefinedColorNames.js index 8758845f..2df203ce 100644 --- a/docs/ui/src/js/predefinedColorNames.js +++ b/docs/ui/src/js/predefinedColorNames.js @@ -8,43 +8,43 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { getAllColorNames } from "./getThemeData"; -import { getColorDifference, capitalizeFirstLetter } from "./utils"; -const colorNames = require("./colornames"); +import {getAllColorNames} from './getThemeData'; +import {getColorDifference, capitalizeFirstLetter} from './utils'; +const colorNames = require('./colornames'); const predefinedColorNames = [ - "Azure", - "Forest", - "Cerulean", - "Blue", - "Pink", - "Red", - "Indigo", - "Purple", - "Blue", - "Green", - "Crimson", - "Salmon", - "Orange", - "Tangerine", - "Yellow", - "Brown", - "Umber", - "Ochre", - "Periwinkle", - "Sage", - "Rose", - "Lavender", - "Lilac", - "Mauve", - "Mustard", - "Seafoam", - "Celery", - "Teal", - "Turquise", - "Sky", - "Gray", - "Slate", + 'Azure', + 'Forest', + 'Cerulean', + 'Blue', + 'Pink', + 'Red', + 'Indigo', + 'Purple', + 'Blue', + 'Green', + 'Crimson', + 'Salmon', + 'Orange', + 'Tangerine', + 'Yellow', + 'Brown', + 'Umber', + 'Ochre', + 'Periwinkle', + 'Sage', + 'Rose', + 'Lavender', + 'Lilac', + 'Mauve', + 'Mustard', + 'Seafoam', + 'Celery', + 'Teal', + 'Turquise', + 'Sky', + 'Gray', + 'Slate' ]; function getClosestColorName(color) { @@ -68,16 +68,12 @@ function getClosestColorName(color) { function getRandomColorName() { const existingColorNames = getAllColorNames(); const predefinedColorNames = Object.keys(colorNames); - let colorNameOptions = predefinedColorNames.filter( - (item) => !existingColorNames.includes(item), - ); - return capitalizeFirstLetter( - colorNameOptions[Math.floor(Math.random() * colorNameOptions.length)], - ); + let colorNameOptions = predefinedColorNames.filter((item) => !existingColorNames.includes(item)); + return capitalizeFirstLetter(colorNameOptions[Math.floor(Math.random() * colorNameOptions.length)]); } module.exports = { predefinedColorNames, getClosestColorName, - getRandomColorName, + getRandomColorName }; diff --git a/docs/ui/src/js/ramps.js b/docs/ui/src/js/ramps.js index 567fc867..885e739c 100644 --- a/docs/ui/src/js/ramps.js +++ b/docs/ui/src/js/ramps.js @@ -9,21 +9,21 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as d3 from "./d3"; -import { _theme } from "./initialTheme"; -import { _sequentialScale } from "./initialSequentialScale"; -import { _divergingScale } from "./initialDivergingScale"; -import { createRGBchannelChart } from "./createRGBchannelChart"; -import { createInterpolationCharts } from "./createInterpolationCharts"; -import { createPaletteInterpolationCharts } from "./createPaletteCharts"; -import { makePowScale, orderColorsByLuminosity } from "./utils"; +import * as d3 from './d3'; +import {_theme} from './initialTheme'; +import {_sequentialScale} from './initialSequentialScale'; +import {_divergingScale} from './initialDivergingScale'; +import {createRGBchannelChart} from './createRGBchannelChart'; +import {createInterpolationCharts} from './createInterpolationCharts'; +import {createPaletteInterpolationCharts} from './createPaletteCharts'; +import {makePowScale, orderColorsByLuminosity} from './utils'; function themeRamp(colors, dest, angle) { - if (!angle) angle = "90"; + if (!angle) angle = '90'; angle = `${angle}deg`; let container = document.getElementById(dest); - let gradient = document.createElement("div"); - gradient.className = "gradient"; + let gradient = document.createElement('div'); + gradient.className = 'gradient'; gradient.style.backgroundImage = `linear-gradient(${angle}, ${colors})`; container.appendChild(gradient); @@ -34,9 +34,8 @@ function themeRampKeyColors(colorKeys, dest, scaleType) { let domains, sqrtDomains; let dotSize = 12; - let colorClass = - scaleType === "sequential" ? _sequentialScale : _divergingScale; - if (scaleType === "sequential") { + let colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale; + if (scaleType === 'sequential') { domains = colorClass.domains; let shift = Number(colorClass.shift); let inverseShift = 1 / shift; @@ -46,7 +45,7 @@ function themeRampKeyColors(colorKeys, dest, scaleType) { }); domains = sqrtDomains; } - if (scaleType === "diverging" || scaleType === "sequential") { + if (scaleType === 'diverging' || scaleType === 'sequential') { domains = colorClass.domains; } else { domains = colorKeys.map((key) => { @@ -55,44 +54,30 @@ function themeRampKeyColors(colorKeys, dest, scaleType) { sqrtDomains = domains; } - let sortedColorKeys = - scaleType === "diverging" - ? colorKeys - : orderColorsByLuminosity(colorKeys, "toLight"); + let sortedColorKeys = scaleType === 'diverging' ? colorKeys : orderColorsByLuminosity(colorKeys, 'toLight'); sortedColorKeys.map((key, index) => { - let lightness = - scaleType === "sequential" - ? colorClass.luminosities[index] / 100 - : d3.hsluv(key).v; + let lightness = scaleType === 'sequential' ? colorClass.luminosities[index] / 100 : d3.hsluv(key).v; // Adjust offset based on same percentage of the // width of the dot, essentially framing the dot - let dotOffset = - scaleType === "theme" || !scaleType - ? (dotSize * lightness) / 100 - : dotSize * domains[index]; - - let left = - scaleType === "sequential" || scaleType === "diverging" - ? domains[index] * 100 - : lightness; - - let leftPosition = `calc(${Math.round(left)}% - ${Math.round( - dotOffset, - )}px)`; - let dot = document.createElement("div"); - dot.className = "themeRampDot"; + let dotOffset = scaleType === 'theme' || !scaleType ? (dotSize * lightness) / 100 : dotSize * domains[index]; + + let left = scaleType === 'sequential' || scaleType === 'diverging' ? domains[index] * 100 : lightness; + + let leftPosition = `calc(${Math.round(left)}% - ${Math.round(dotOffset)}px)`; + let dot = document.createElement('div'); + dot.className = 'themeRampDot'; dot.title = `Key color: ${key}`; dot.style.left = leftPosition; container.appendChild(dot); }); } -function updateRamps(color, id, scaleType = "theme") { +function updateRamps(color, id, scaleType = 'theme') { let colors, min, max; - let angle = "90"; - if (scaleType === "theme") { + let angle = '90'; + if (scaleType === 'theme') { colors = color.backgroundColorScale; } else { colors = color.colors; @@ -101,18 +86,18 @@ function updateRamps(color, id, scaleType = "theme") { max = Math.max(...lums); } - if (scaleType === "diverging") id = scaleType; + if (scaleType === 'diverging') id = scaleType; - let gradientId = id.concat("_gradient"); - document.getElementById(gradientId).innerHTML = " "; + let gradientId = id.concat('_gradient'); + document.getElementById(gradientId).innerHTML = ' '; themeRamp(colors, gradientId, angle); themeRampKeyColors(color.colorKeys, gradientId, scaleType); - if (scaleType === "theme") { + if (scaleType === 'theme') { // Update gradient swatch from panel view - let gradientSwatchId = id.concat("_gradientSwatch"); - document.getElementById(gradientSwatchId).innerHTML = " "; - themeRamp(colors, gradientSwatchId, "45"); + let gradientSwatchId = id.concat('_gradientSwatch'); + document.getElementById(gradientSwatchId).innerHTML = ' '; + themeRamp(colors, gradientSwatchId, '45'); createRGBchannelChart(colors); } else { @@ -120,29 +105,21 @@ function updateRamps(color, id, scaleType = "theme") { } let chartsModeSelect; - if (scaleType === "theme") - chartsModeSelect = document.getElementById("chartsMode"); + if (scaleType === 'theme') chartsModeSelect = document.getElementById('chartsMode'); else chartsModeSelect = document.getElementById(`${id}_chartsMode`); let chartsMode = chartsModeSelect.value; - if (scaleType === "diverging") { - createPaletteInterpolationCharts( - [color.startScale.colorsReversed, color.endScale.colors], - chartsMode, - scaleType, - ); + if (scaleType === 'diverging') { + createPaletteInterpolationCharts([color.startScale.colorsReversed, color.endScale.colors], chartsMode, scaleType); } else { createInterpolationCharts(colors, chartsMode, scaleType); } - let panelOutputId = - scaleType === "theme" - ? "panelColorScaleOutput" - : `${scaleType}ColorScaleOutput`; - if (scaleType !== "theme") { + let panelOutputId = scaleType === 'theme' ? 'panelColorScaleOutput' : `${scaleType}ColorScaleOutput`; + if (scaleType !== 'theme') { let panelOutputContent = document.getElementById(panelOutputId); - panelOutputContent.innerHTML = " "; - const formattedColorsString = colors.toString().replaceAll(",", ", "); + panelOutputContent.innerHTML = ' '; + const formattedColorsString = colors.toString().replaceAll(',', ', '); panelOutputContent.innerHTML = formattedColorsString; } } @@ -161,5 +138,5 @@ module.exports = { themeRamp, themeRampKeyColors, createAllColorRamps, - updateRamps, + updateRamps }; diff --git a/docs/ui/src/js/ratios.js b/docs/ui/src/js/ratios.js index ceb60998..002e5b83 100644 --- a/docs/ui/src/js/ratios.js +++ b/docs/ui/src/js/ratios.js @@ -9,28 +9,24 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import * as Leo from "@adobe/leonardo-contrast-colors"; -import * as d3 from "./d3"; -import { - getContrastRatioInputs, - getThemeContrastRatios, - getLuminosities, -} from "./getThemeData"; -import { _theme } from "./initialTheme"; -import { createOutputColors } from "./createOutputColors"; -import { createOutputParameters } from "./createOutputParameters"; -import { createRatioChart, createLuminosityChart } from "./createRatioChart"; -import { randomId, round, lerp } from "./utils"; -import { difference } from "d3"; +import * as Leo from '@adobe/leonardo-contrast-colors'; +import * as d3 from './d3'; +import {getContrastRatioInputs, getThemeContrastRatios, getLuminosities} from './getThemeData'; +import {_theme} from './initialTheme'; +import {createOutputColors} from './createOutputColors'; +import {createOutputParameters} from './createOutputParameters'; +import {createRatioChart, createLuminosityChart} from './createRatioChart'; +import {randomId, round, lerp} from './utils'; +import {difference} from 'd3'; function addRatio() { - let wcagFormula = document.getElementById("themeWCAG").value; + let wcagFormula = document.getElementById('themeWCAG').value; // Gather all existing ratios from _theme let themeRatios = getContrastRatioInputs(); // find highest value var hi = Math.max(...themeRatios); // Define cap based on wcag formula - let cap = wcagFormula === "wcag2" ? 20 : 106; + let cap = wcagFormula === 'wcag2' ? 20 : 106; // Assign an incremented value for the new ratio let value; if (hi < cap - 1) value = Number(hi + 1).toFixed(2); @@ -56,43 +52,43 @@ function createRatioInput(v, c) { let ratioIndex = resolve.length; let indexedColor = _theme.contrastColors[1].values[ratioIndex]; if (!indexedColor) { - c = "#cacaca"; + c = '#cacaca'; } else { c = indexedColor.value; } }); } - const luminosityGradient = document.getElementById("luminosityGradient"); + const luminosityGradient = document.getElementById('luminosityGradient'); let luminosityValue = d3.hsluv(c).v; let swatchColor = d3.hsluv(0, 0, luminosityValue).formatHex(); // let methodPicker = document.getElementById('contrastMethod'); // let method = methodPicker.value; - let themeWCAG = document.getElementById("themeWCAG").value; - let method = themeWCAG === "wcag2" ? "WCAG" : "APCA"; + let themeWCAG = document.getElementById('themeWCAG').value; + let method = themeWCAG === 'wcag2' ? 'WCAG' : 'APCA'; - var ratios = document.getElementById("ratioInput-wrapper"); - var div = document.createElement("div"); + var ratios = document.getElementById('ratioInput-wrapper'); + var div = document.createElement('div'); var randId = randomId(); - div.className = "ratio-Item ratioGrid"; - div.id = randId + "-item"; - var inputWrapper = document.createElement("span"); + div.className = 'ratio-Item ratioGrid'; + div.id = randId + '-item'; + var inputWrapper = document.createElement('span'); - var sw = document.createElement("span"); - sw.className = "ratio-Swatch"; - sw.id = randId + "-sw"; + var sw = document.createElement('span'); + sw.className = 'ratio-Swatch'; + sw.id = randId + '-sw'; sw.style.backgroundColor = swatchColor; - var ratioInput = document.createElement("input"); - let ratioInputWrapper = document.createElement("div"); - ratioInputWrapper.className = "spectrum-Textfield ratioGrid--ratio"; - ratioInput.className = "spectrum-Textfield-input ratio-Field"; - ratioInput.type = "number"; - ratioInput.min = method === "APCA" ? "-107" : "-10"; - ratioInput.max = method === "APCA" ? "106" : "21"; - ratioInput.step = ".01"; - let ratioInputDefaultValue = method === "WCAG" ? 4.5 : 60; + var ratioInput = document.createElement('input'); + let ratioInputWrapper = document.createElement('div'); + ratioInputWrapper.className = 'spectrum-Textfield ratioGrid--ratio'; + ratioInput.className = 'spectrum-Textfield-input ratio-Field'; + ratioInput.type = 'number'; + ratioInput.min = method === 'APCA' ? '-107' : '-10'; + ratioInput.max = method === 'APCA' ? '106' : '21'; + ratioInput.step = '.01'; + let ratioInputDefaultValue = method === 'WCAG' ? 4.5 : 60; ratioInput.placeholder = ratioInputDefaultValue; ratioInput.id = randId; ratioInput.value = v; @@ -100,35 +96,29 @@ function createRatioInput(v, c) { ratioInput.oninput = syncRatioInputs; - var luminosityInput = document.createElement("input"); - let luminosityInputWrapper = document.createElement("div"); - luminosityInputWrapper.className = "spectrum-Textfield ratioGrid--luminosity"; + var luminosityInput = document.createElement('input'); + let luminosityInputWrapper = document.createElement('div'); + luminosityInputWrapper.className = 'spectrum-Textfield ratioGrid--luminosity'; - luminosityInput.className = "spectrum-Textfield-input luminosity-Field"; - luminosityInput.type = "number"; - luminosityInput.min = "0"; - luminosityInput.max = "100"; - luminosityInput.step = ".01"; - luminosityInput.id = randId + "_luminosity"; + luminosityInput.className = 'spectrum-Textfield-input luminosity-Field'; + luminosityInput.type = 'number'; + luminosityInput.min = '0'; + luminosityInput.max = '100'; + luminosityInput.step = '.01'; + luminosityInput.id = randId + '_luminosity'; luminosityInput.onkeydown = checkRatioStepModifiers; luminosityInput.oninput = syncRatioInputs; // Pass fail status - let statusLabel = document.createElement("div"); - statusLabel.id = randId + "_status"; - let statusIconName = v < 3 ? "Alert" : "Checkmak"; - let statusClass = v < 3 ? "statusLabel--fail" : "statusLabel--pass"; - let statusLabelText = v < 3 ? "Fail" : v < 4.5 ? "+18px" : "Pass"; - statusLabel.title = - v < 3 - ? "Contrast fails minimums for text and UI components" - : v < 4.5 - ? "Contrast passes minimum for large text and UI components" - : "Contrast passes minimums for all text and UI components"; - let statusLabelSpan = document.createElement("span"); + let statusLabel = document.createElement('div'); + statusLabel.id = randId + '_status'; + let statusIconName = v < 3 ? 'Alert' : 'Checkmak'; + let statusClass = v < 3 ? 'statusLabel--fail' : 'statusLabel--pass'; + let statusLabelText = v < 3 ? 'Fail' : v < 4.5 ? '+18px' : 'Pass'; + statusLabel.title = v < 3 ? 'Contrast fails minimums for text and UI components' : v < 4.5 ? 'Contrast passes minimum for large text and UI components' : 'Contrast passes minimums for all text and UI components'; + let statusLabelSpan = document.createElement('span'); statusLabel.className = `statusLabel ${statusClass}`; - statusLabelSpan.className = - "spectrum-Body spectrum-Body--sizeXS statusLabel-text"; + statusLabelSpan.className = 'spectrum-Body spectrum-Body--sizeXS statusLabel-text'; statusLabelSpan.innerHTML = statusLabelText; let statusIcon = `${statusLabelText}`; @@ -410,7 +381,7 @@ function syncRatioInputs(e) { ratioUpdateValues(resolve); ratioUpdate(); - if (!thisId.includes("_luminosity")) { + if (!thisId.includes('_luminosity')) { let luminosityInputId = `${thisId}_luminosity`; let luminosityInput = document.getElementById(luminosityInputId); // Must calculate luminosity of respective contrast value @@ -426,30 +397,28 @@ function syncRatioInputs(e) { }); setTimeout(() => { - let lDotId = baseId.concat("_dot"); + let lDotId = baseId.concat('_dot'); let lDot = document.getElementById(lDotId); let lumReversed = 100 - luminosity; let dotPercentOffset = (lumReversed / 100) * 8; - let dotPosition = `calc(${Math.round(lumReversed)}% - ${Math.round( - dotPercentOffset, - )}px)`; + let dotPosition = `calc(${Math.round(lumReversed)}% - ${Math.round(dotPercentOffset)}px)`; lDot.style.top = dotPosition; }, 250); } function checkRatioStepModifiers(e) { if (!e.shiftKey) return; - if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return; + if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return; e.preventDefault(); const value = Number(e.target.value); let newValue; switch (e.key) { - case "ArrowDown": + case 'ArrowDown': newValue = value - 1; e.target.value = newValue.toFixed(2); e.target.oninput(e); break; - case "ArrowUp": + case 'ArrowUp': newValue = value + 1; e.target.value = newValue.toFixed(2); e.target.oninput(e); @@ -461,13 +430,13 @@ function checkRatioStepModifiers(e) { // Delete ratio function deleteRatio(e) { let id = e.target.parentNode.id; - let inputId = id.replace("-item", ""); + let inputId = id.replace('-item', ''); let input = document.getElementById(inputId); let value = input.value; let self = document.getElementById(id); // var sliderid = id.replace('-item', '') + '-sl'; // var slider = document.getElementById(sliderid); - let dotId = inputId.concat("_dot"); + let dotId = inputId.concat('_dot'); let dot = document.getElementById(dotId); dot.remove(); self.remove(); @@ -482,10 +451,7 @@ function deleteRatio(e) { ratioUpdate(); } -function ratioUpdate( - chartRatios = Promise.resolve(getThemeContrastRatios()), - chartLuminosities = Promise.resolve(getLuminosities()), -) { +function ratioUpdate(chartRatios = Promise.resolve(getThemeContrastRatios()), chartLuminosities = Promise.resolve(getLuminosities())) { Promise.all([chartRatios, chartLuminosities]).then(function (values) { createOutputColors(); createRatioChart(values[0]); @@ -502,46 +468,41 @@ function ratioUpdateValues(themeRatios = getThemeContrastRatios()) { _theme.colors.forEach((c) => { if (c) { - argArray.push({ color: c.name, ratios: themeRatios }); + argArray.push({color: c.name, ratios: themeRatios}); } }); _theme.updateColor = argArray; } function dispatchRatioInputEvents() { - let inputWrapper = document.getElementById("ratioInput-wrapper"); - inputWrapper.classList.add("is-disabled"); + let inputWrapper = document.getElementById('ratioInput-wrapper'); + inputWrapper.classList.add('is-disabled'); // Loop every target ratio input and trigger input event to refresh // lightness values and position of dot on gradient visual - let ratioFields = document.getElementsByClassName("ratio-Field"); + let ratioFields = document.getElementsByClassName('ratio-Field'); for (let i = 0; i < ratioFields.length; i++) { - ratioFields[i].dispatchEvent(new Event("input")); + ratioFields[i].dispatchEvent(new Event('input')); } setTimeout(() => { - inputWrapper.classList.remove("is-disabled"); + inputWrapper.classList.remove('is-disabled'); }, 900); } -document.getElementById("themeWCAG").addEventListener("input", function (e) { - let inputWrapper = document.getElementById("ratioInput-wrapper"); - inputWrapper.classList.add("is-disabled"); +document.getElementById('themeWCAG').addEventListener('input', function (e) { + let inputWrapper = document.getElementById('ratioInput-wrapper'); + inputWrapper.classList.add('is-disabled'); let value = e.target.value; _theme.formula = value; - let label = document.getElementById("ratioInputLabel"); - label.innerHTML = - value === "wcag2" - ? "WCAG 2 contrast" - : value === "wcag3" - ? "APCA contrast" - : "Contrast"; + let label = document.getElementById('ratioInputLabel'); + label.innerHTML = value === 'wcag2' ? 'WCAG 2 contrast' : value === 'wcag3' ? 'APCA contrast' : 'Contrast'; // Gather all luminosity input values // Create temporary color for each with it's L value // Calculate new contrast formula value based on the temp color // Map that to the new ratio input values - let LumFields = document.getElementsByClassName("luminosity-Field"); + let LumFields = document.getElementsByClassName('luminosity-Field'); let LumValues = []; for (let i = 0; i < LumFields.length; i++) { LumValues.push(LumFields[i].value); @@ -550,20 +511,16 @@ document.getElementById("themeWCAG").addEventListener("input", function (e) { let newContrasts = LumValues.map((l) => { let swatchColor = d3.hsluv(0, 0, l).formatHex(); let bg = _theme.contrastColors[0].background; - let fgArray = [ - d3.rgb(swatchColor).r, - d3.rgb(swatchColor).g, - d3.rgb(swatchColor).b, - ]; + let fgArray = [d3.rgb(swatchColor).r, d3.rgb(swatchColor).g, d3.rgb(swatchColor).b]; let bgArray = [d3.rgb(bg).r, d3.rgb(bg).g, d3.rgb(bg).b]; return round(Leo.contrast(fgArray, bgArray, undefined, value), 2); }); - let RatioFields = document.getElementsByClassName("ratio-Field"); + let RatioFields = document.getElementsByClassName('ratio-Field'); const updateRatioValues = () => { for (let i = 0; i < RatioFields.length; i++) { - RatioFields[i].min = value === "wcag3" ? "-107" : "-10"; - RatioFields[i].max = value === "wcag3" ? "106" : "21"; + RatioFields[i].min = value === 'wcag3' ? '-107' : '-10'; + RatioFields[i].max = value === 'wcag3' ? '106' : '21'; RatioFields[i].value = newContrasts[i]; } }; @@ -571,12 +528,12 @@ document.getElementById("themeWCAG").addEventListener("input", function (e) { update.then(function () { for (let i = 0; i < RatioFields.length; i++) { - RatioFields[i].dispatchEvent(new Event("input")); + RatioFields[i].dispatchEvent(new Event('input')); } }); setTimeout(() => { - inputWrapper.classList.remove("is-disabled"); + inputWrapper.classList.remove('is-disabled'); }, 500); }); @@ -595,5 +552,5 @@ module.exports = { syncRatioInputs, distributeRatios, checkRatioStepModifiers, - deleteRatio, + deleteRatio }; diff --git a/docs/ui/src/js/scaleKeyColors.js b/docs/ui/src/js/scaleKeyColors.js index 9a2d4977..35834804 100644 --- a/docs/ui/src/js/scaleKeyColors.js +++ b/docs/ui/src/js/scaleKeyColors.js @@ -9,85 +9,66 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { randomId, removeElementsByClass, throttle } from "./utils"; -import { updateRamps } from "./ramps"; -import { updateColorDots } from "./colorWheel"; -import { createSamples } from "./createSamples"; -import { createDemos } from "./createDemos"; -import { create3dModel } from "./create3dModel"; -import { createPanelReportTable } from "./createPanelReportTable"; -const chroma = require("chroma-js"); -const { extendChroma } = require("./chroma-plus"); - -function addScaleKeyColorInput( - c, - thisId = this.id, - scaleType, - index, - scalePosition, -) { +import {randomId, removeElementsByClass, throttle} from './utils'; +import {updateRamps} from './ramps'; +import {updateColorDots} from './colorWheel'; +import {createSamples} from './createSamples'; +import {createDemos} from './createDemos'; +import {create3dModel} from './create3dModel'; +import {createPanelReportTable} from './createPanelReportTable'; +const chroma = require('chroma-js'); +const {extendChroma} = require('./chroma-plus'); + +function addScaleKeyColorInput(c, thisId = this.id, scaleType, index, scalePosition) { let sampleNumber = document.getElementById(`${scaleType}Samples`); let chartsModeSelect = document.getElementById(`${scaleType}_chartsMode`); let currentColor; - if (scaleType === "sequential") currentColor = _sequentialScale; - if (scaleType === "diverging") currentColor = _divergingScale; - let currentKeys = - scaleType === "sequential" - ? currentColor.colorKeys - : scalePosition === "start" - ? currentColor.startKeys - : scalePosition === "end" - ? currentColor.endKeys - : currentColor.middleKey; - let parent = thisId - .replace("_addKeyColor", "") - .replace("_addStartKeyColor", "") - .replace("_addEndKeyColor", ""); - - let concatString = - scaleType === "theme" || scaleType === "sequential" - ? "_keyColors" - : `_${scalePosition}KeyColors`; + if (scaleType === 'sequential') currentColor = _sequentialScale; + if (scaleType === 'diverging') currentColor = _divergingScale; + let currentKeys = scaleType === 'sequential' ? currentColor.colorKeys : scalePosition === 'start' ? currentColor.startKeys : scalePosition === 'end' ? currentColor.endKeys : currentColor.middleKey; + let parent = thisId.replace('_addKeyColor', '').replace('_addStartKeyColor', '').replace('_addEndKeyColor', ''); + + let concatString = scaleType === 'theme' || scaleType === 'sequential' ? '_keyColors' : `_${scalePosition}KeyColors`; let destId = parent.concat(concatString); let dest = document.getElementById(destId); - let div = document.createElement("div"); + let div = document.createElement('div'); let randId = randomId(); - if (scalePosition === "middle") { + if (scalePosition === 'middle') { div.className = `keyColor keyColor-${scaleType} keyColor-${scaleType}-${scalePosition}`; } else { div.className = `keyColor keyColor-${scaleType}`; } - div.id = randId + "-item"; - let sw = document.createElement("input"); - sw.type = "color"; + div.id = randId + '-item'; + let sw = document.createElement('input'); + sw.type = 'color'; sw.value = c; sw.addEventListener( - "input", + 'input', throttle((e) => { // Replace current indexed value from color keys with new value from color input field c = e.target.value; - if (scaleType === "sequential") { + if (scaleType === 'sequential') { // let currentKeys = currentColor.colorKeys; currentKeys.splice(index, 1, c); currentColor.colorKeys = currentKeys; } - if (scaleType === "diverging") { - if (scalePosition === "start") { + if (scaleType === 'diverging') { + if (scalePosition === 'start') { // let currentKeys = currentColor.startKeys; currentKeys.splice(index, 1, c); currentColor.startKeys = currentKeys; } - if (scalePosition === "end") { + if (scalePosition === 'end') { // let currentKeys = currentColor.endKeys; currentKeys.splice(index, 1, c); currentColor.endKeys = currentKeys; } - if (scalePosition === "middle") { + if (scalePosition === 'middle') { currentColor.middleKey = c; } } @@ -95,47 +76,39 @@ function addScaleKeyColorInput( updateRamps(currentColor, parent, scaleType); updateColorDots(chartsModeSelect.value, scaleType); createSamples(sampleNumber.value, scaleType); - if (scaleType === "sequential" || scaleType === "diverging") { + if (scaleType === 'sequential' || scaleType === 'diverging') { createPanelReportTable(null, null, scaleType); } - }, 10), + }, 10) ); sw.addEventListener( - "input", + 'input', throttle(() => { createDemos(scaleType); - create3dModel( - `${scaleType}ModelWrapper`, - [currentColor], - chartsModeSelect.value, - scaleType, - ); - }, 250), + create3dModel(`${scaleType}ModelWrapper`, [currentColor], chartsModeSelect.value, scaleType); + }, 250) ); - sw.className = "keyColor-Item"; - sw.id = randId + "-sw"; + sw.className = 'keyColor-Item'; + sw.id = randId + '-sw'; sw.style.backgroundColor = c; div.appendChild(sw); let isDisabledClass; - if (scaleType === "sequential") - isDisabledClass = currentKeys.length > 2 ? "" : "is-disabled"; - else isDisabledClass = currentKeys.length > 1 ? "" : "is-disabled"; + if (scaleType === 'sequential') isDisabledClass = currentKeys.length > 2 ? '' : 'is-disabled'; + else isDisabledClass = currentKeys.length > 1 ? '' : 'is-disabled'; - if (scalePosition !== "middle") { - let button = document.createElement("button"); + if (scalePosition !== 'middle') { + let button = document.createElement('button'); button.className = - scaleType === "diverging" - ? `spectrum-ActionButton spectrum-ActionButton--sizeM removeKeyColor-${scaleType}-${scalePosition} ${isDisabledClass}` - : `spectrum-ActionButton spectrum-ActionButton--sizeM removeKeyColor-${scaleType} ${isDisabledClass}`; + scaleType === 'diverging' ? `spectrum-ActionButton spectrum-ActionButton--sizeM removeKeyColor-${scaleType}-${scalePosition} ${isDisabledClass}` : `spectrum-ActionButton spectrum-ActionButton--sizeM removeKeyColor-${scaleType} ${isDisabledClass}`; button.innerHTML = ` `; - button.addEventListener("click", function (e) { + button.addEventListener('click', function (e) { let sampleNumber = document.getElementById(`${scaleType}Samples`); let samples = sampleNumber.value; replaceScaleKeyInputsFromClass(thisId, scaleType, index, scalePosition); @@ -152,39 +125,38 @@ function replaceScaleKeyInputsFromClass(id, scaleType, index, scalePosition) { let smoothWrapper = document.getElementById(`${scaleType}_smoothWrapper`); let smooth = document.getElementById(`${scaleType}_smooth`); - let parentId = id.replace("_addKeyColor", ""); + let parentId = id.replace('_addKeyColor', ''); let currentColor, colorKeys; - if (scaleType === "sequential") { + if (scaleType === 'sequential') { currentColor = _sequentialScale; colorKeys = currentColor.colorKeys; } - if (scaleType === "diverging") { + if (scaleType === 'diverging') { currentColor = _divergingScale; - colorKeys = - scalePosition === "start" ? currentColor.startKeys : currentColor.endKeys; + colorKeys = scalePosition === 'start' ? currentColor.startKeys : currentColor.endKeys; } colorKeys.splice(index, 1); // reassign new array to color class - if (scaleType === "sequential") { + if (scaleType === 'sequential') { currentColor.colorKeys = colorKeys; } - if (scaleType === "diverging") { - if (scalePosition === "start") currentColor.startKeys = colorKeys; - if (scalePosition === "end") currentColor.endKeys = colorKeys; + if (scaleType === 'diverging') { + if (scalePosition === 'start') currentColor.startKeys = colorKeys; + if (scalePosition === 'end') currentColor.endKeys = colorKeys; } - if (scaleType === "sequential") { + if (scaleType === 'sequential') { removeElementsByClass(`keyColor-${scaleType}`); } else { - if (scalePosition === "start") { + if (scalePosition === 'start') { // only remove respective inputs - let parentDest = document.getElementById("diverging_startKeyColors"); + let parentDest = document.getElementById('diverging_startKeyColors'); removeElementsByClass(`keyColor-${scaleType}`, parentDest); } else { // only remove respective inputs - let parentDest = document.getElementById("diverging_endKeyColors"); + let parentDest = document.getElementById('diverging_endKeyColors'); removeElementsByClass(`keyColor-${scaleType}`, parentDest); } } @@ -198,12 +170,12 @@ function replaceScaleKeyInputsFromClass(id, scaleType, index, scalePosition) { currentColor.smooth = false; } - if (scaleType === "sequential") { + if (scaleType === 'sequential') { currentColor.colorKeys.forEach((key, i) => { addScaleKeyColorInput(key, id, scaleType, i, scalePosition); }); } else { - if (scalePosition === "start") { + if (scalePosition === 'start') { currentColor.startKeys.forEach((key, i) => { addScaleKeyColorInput(key, id, scaleType, i, scalePosition); }); @@ -217,7 +189,7 @@ function replaceScaleKeyInputsFromClass(id, scaleType, index, scalePosition) { updateRamps(currentColor, parentId, scaleType); let targetClass, buttons; - if (scaleType === "diverging") { + if (scaleType === 'diverging') { targetClass = `removeKeyColor-${scaleType}-${scalePosition}`; buttons = document.getElementsByClassName(targetClass); } else { @@ -226,22 +198,22 @@ function replaceScaleKeyInputsFromClass(id, scaleType, index, scalePosition) { } if (colorKeys.length >= 2) { for (let i = 0; i < buttons.length; i++) { - buttons[i].classList.remove("is-disabled"); + buttons[i].classList.remove('is-disabled'); buttons[i].disabled = false; } } else { for (let i = 0; i < buttons.length; i++) { - buttons[i].classList.add("is-disabled"); + buttons[i].classList.add('is-disabled'); buttons[i].disabled = true; } } if (colorKeys.length >= 3) { smooth.disabled = false; - smoothWrapper.classList.remove("is-disabled"); + smoothWrapper.classList.remove('is-disabled'); } else { smooth.disabled = true; - smoothWrapper.classList.add("is-disabled"); + smoothWrapper.classList.add('is-disabled'); } } @@ -249,59 +221,47 @@ function addScaleKeyColor(scaleType, e, position) { let smoothWrapper = document.getElementById(`${scaleType}_smoothWrapper`); let smooth = document.getElementById(`${scaleType}_smooth`); let thisId = e.target.id; - let parentId = thisId.replace("_addKeyColor", ""); + let parentId = thisId.replace('_addKeyColor', ''); - let currentColor = - scaleType === "sequential" ? _sequentialScale : _divergingScale; // TODO: replace with _diverging when available - let currentKeys = - scaleType === "sequential" - ? currentColor.colorKeys - : position === "start" - ? currentColor.startKeys - : currentColor.endKeys; + let currentColor = scaleType === 'sequential' ? _sequentialScale : _divergingScale; // TODO: replace with _diverging when available + let currentKeys = scaleType === 'sequential' ? currentColor.colorKeys : position === 'start' ? currentColor.startKeys : currentColor.endKeys; let lastIndex = currentKeys.length; if (!lastIndex) lastIndex = 0; - let lastColor = - lastIndex > 0 - ? chroma(currentKeys[lastIndex - 1]).hsluv() - : chroma(currentKeys[0]).hsluv(); + let lastColor = lastIndex > 0 ? chroma(currentKeys[lastIndex - 1]).hsluv() : chroma(currentKeys[0]).hsluv(); let lastColorLightness = lastColor[2]; let fCtintHalf = (100 - lastColorLightness) / 3 + lastColorLightness; let fCshadeHalf = lastColorLightness / 2; - let c = - lastColorLightness >= 50 - ? chroma.hsluv(lastColor[0], lastColor[1], fCshadeHalf) - : chroma.hsluv(lastColor[0], lastColor[1], fCtintHalf); + let c = lastColorLightness >= 50 ? chroma.hsluv(lastColor[0], lastColor[1], fCshadeHalf) : chroma.hsluv(lastColor[0], lastColor[1], fCtintHalf); c = c.hex(); currentKeys.push(c); // Update color class arguments via the theme class - if (scaleType === "sequential") { + if (scaleType === 'sequential') { currentColor.colorKeys = currentKeys; removeElementsByClass(`keyColor-${scaleType}`); } else { - if (position === "start") { + if (position === 'start') { currentColor.startKeys = currentKeys; // only remove respective inputs - let parentDest = document.getElementById("diverging_startKeyColors"); + let parentDest = document.getElementById('diverging_startKeyColors'); removeElementsByClass(`keyColor-${scaleType}`, parentDest); } else { currentColor.endKeys = currentKeys; // only remove respective inputs - let parentDest = document.getElementById("diverging_endKeyColors"); + let parentDest = document.getElementById('diverging_endKeyColors'); removeElementsByClass(`keyColor-${scaleType}`, parentDest); } } - if (scaleType === "sequential") { + if (scaleType === 'sequential') { currentColor.colorKeys.forEach((key, i) => { addScaleKeyColorInput(key, thisId, scaleType, i, position); }); } else { - if (position === "start") { + if (position === 'start') { currentColor.startKeys.forEach((key, i) => { addScaleKeyColorInput(key, thisId, scaleType, i, position); }); @@ -317,21 +277,21 @@ function addScaleKeyColor(scaleType, e, position) { if (currentKeys.length >= 3) { smooth.disabled = false; - smoothWrapper.classList.remove("is-disabled"); + smoothWrapper.classList.remove('is-disabled'); } else { smooth.disabled = true; - smoothWrapper.classList.add("is-disabled"); + smoothWrapper.classList.add('is-disabled'); } } function clearAllColors(e) { let targetId = e.target.id; - let parentId = targetId.replace("_clearAllColors", ""); - let keyColorsId = targetId.replace("_clearAllColors", "_keyColors"); - document.getElementById(keyColorsId).innerHTML = " "; + let parentId = targetId.replace('_clearAllColors', ''); + let keyColorsId = targetId.replace('_clearAllColors', '_keyColors'); + document.getElementById(keyColorsId).innerHTML = ' '; let color = getColorClassById(parentId); - _theme.updateColor = { color: color.name, colorKeys: ["#000000"] }; + _theme.updateColor = {color: color.name, colorKeys: ['#000000']}; updateRamps(); } @@ -341,5 +301,5 @@ window.clearAllColors = clearAllColors; module.exports = { addScaleKeyColor, addScaleKeyColorInput, - clearAllColors, + clearAllColors }; diff --git a/docs/ui/src/js/sliderInput.js b/docs/ui/src/js/sliderInput.js index f2181202..34300346 100644 --- a/docs/ui/src/js/sliderInput.js +++ b/docs/ui/src/js/sliderInput.js @@ -9,54 +9,42 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { - createOutputColors, - createDetailOutputColors, -} from "./createOutputColors"; -import { createOutputParameters } from "./createOutputParameters"; -import { getThemeContrastRatios, getLuminosities } from "./getThemeData"; -import { createRatioChart, createLuminosityChart } from "./createRatioChart"; -import { _theme } from "./initialTheme"; -import { dispatchRatioInputEvents } from "./ratios"; -import { round, throttle } from "./utils"; +import {createOutputColors, createDetailOutputColors} from './createOutputColors'; +import {createOutputParameters} from './createOutputParameters'; +import {getThemeContrastRatios, getLuminosities} from './getThemeData'; +import {createRatioChart, createLuminosityChart} from './createRatioChart'; +import {_theme} from './initialTheme'; +import {dispatchRatioInputEvents} from './ratios'; +import {round, throttle} from './utils'; function sliderValue(e) { let id = e.target.id; let slider = document.getElementById(id); - let labelId = id.replace("Slider", "Value"); + let labelId = id.replace('Slider', 'Value'); let label = document.getElementById(labelId); - let labelValue = labelId.includes("Contrast") - ? `${round(slider.value * 100)}%` - : `${slider.value}%`; + let labelValue = labelId.includes('Contrast') ? `${round(slider.value * 100)}%` : `${slider.value}%`; label.innerHTML = labelValue; } function sliderInput(e) { let value = e.target.value; let id = e.target.id; - let property = - id === "themeBrightnessSlider" - ? "lightness" - : id === "themeContrastSlider" - ? "contrast" - : id === "themeSaturationSlider" - ? "saturation" - : undefined; + let property = id === 'themeBrightnessSlider' ? 'lightness' : id === 'themeContrastSlider' ? 'contrast' : id === 'themeSaturationSlider' ? 'saturation' : undefined; const updateThemeClass = Promise.resolve((_theme[property] = Number(value))); updateThemeClass.then(() => { createOutputColors(); createOutputParameters(); - if (document.getElementById("detailJustifiedWrapper")) { + if (document.getElementById('detailJustifiedWrapper')) { const currentColorId = document.querySelector('[id$="_colorName2"]').id; const currentColorName = document.getElementById(currentColorId).value; createDetailOutputColors(currentColorName); } - const lineTypeSelect = document.getElementById("chartLineType"); + const lineTypeSelect = document.getElementById('chartLineType'); const lineType = lineTypeSelect.value; - let isStep = lineType === "step" ? true : false; + let isStep = lineType === 'step' ? true : false; let chartLuminosities = Promise.resolve(getLuminosities()); chartLuminosities.then(function (resolve) { @@ -70,23 +58,23 @@ function sliderInput(e) { }); } -const sliderB = document.getElementById("themeBrightnessSlider"); -const sliderC = document.getElementById("themeContrastSlider"); -const sliderD = document.getElementById("themeSaturationSlider"); -sliderB.addEventListener("input", sliderValue); -sliderB.addEventListener("input", throttle(sliderInput, 10)); -sliderB.addEventListener("change", throttle(dispatchRatioInputEvents, 20)); +const sliderB = document.getElementById('themeBrightnessSlider'); +const sliderC = document.getElementById('themeContrastSlider'); +const sliderD = document.getElementById('themeSaturationSlider'); +sliderB.addEventListener('input', sliderValue); +sliderB.addEventListener('input', throttle(sliderInput, 10)); +sliderB.addEventListener('change', throttle(dispatchRatioInputEvents, 20)); -sliderC.addEventListener("input", sliderValue); -sliderC.addEventListener("input", throttle(sliderInput, 10)); +sliderC.addEventListener('input', sliderValue); +sliderC.addEventListener('input', throttle(sliderInput, 10)); -sliderD.addEventListener("input", sliderValue); -sliderD.addEventListener("input", throttle(sliderInput, 10)); +sliderD.addEventListener('input', sliderValue); +sliderD.addEventListener('input', throttle(sliderInput, 10)); window.sliderValue = sliderValue; window.sliderInput = sliderInput; module.exports = { sliderValue, - sliderInput, + sliderInput }; diff --git a/docs/ui/src/js/sortColorScales.js b/docs/ui/src/js/sortColorScales.js index 55319c57..2b8bd625 100644 --- a/docs/ui/src/js/sortColorScales.js +++ b/docs/ui/src/js/sortColorScales.js @@ -8,18 +8,18 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { _theme } from "./initialTheme"; -import { addColorScale } from "./colorScale"; -import { themeUpdate } from "./themeUpdate"; -import { removeElementsByClass } from "./utils"; -const chroma = require("chroma-js"); -const { extendChroma } = require("./chroma-plus"); +import {_theme} from './initialTheme'; +import {addColorScale} from './colorScale'; +import {themeUpdate} from './themeUpdate'; +import {removeElementsByClass} from './utils'; +const chroma = require('chroma-js'); +const {extendChroma} = require('./chroma-plus'); extendChroma(chroma); window.sortColorScales = sortColorScales; function sortColorScales() { // Create an overlay to show progress - const wrapper = document.getElementById("themeColorWrapper"); + const wrapper = document.getElementById('themeColorWrapper'); wrapper.style.opacity = 0.4; // Artificially pause @@ -49,7 +49,7 @@ function sortColorScales() { // that cross over the 360deg threshold (ie, [1, 358]) if (Math.max(...hues) > 340 && Math.min(...hues) < 20) avgHues = 360; - objArr.push({ hue: avgHues, color: _theme.colors[i] }); + objArr.push({hue: avgHues, color: _theme.colors[i]}); } // Then, sort the new array by the hue key @@ -64,7 +64,7 @@ function sortColorScales() { _theme.colors = []; // Then replace all DOM elements for colorscales with new ones so they're // presented in the same order as the theme has them. - removeElementsByClass("themeColor_item"); + removeElementsByClass('themeColor_item'); for (let i = 0; i < sortedColors.length; i++) { addColorScale(sortedColors[i]); } @@ -75,5 +75,5 @@ function sortColorScales() { } module.exports = { - sortColorScales, + sortColorScales }; diff --git a/docs/ui/src/js/tabs.js b/docs/ui/src/js/tabs.js index 7a042ccf..ee579e7e 100644 --- a/docs/ui/src/js/tabs.js +++ b/docs/ui/src/js/tabs.js @@ -14,20 +14,20 @@ function openPanelTab(evt, tabName) { var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("paneltabcontent"); + tabcontent = document.getElementsByClassName('paneltabcontent'); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" - tablinks = document.getElementsByClassName("panel-Tabs-item"); + tablinks = document.getElementsByClassName('panel-Tabs-item'); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "flex"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'flex'; + evt.currentTarget.className += ' is-selected'; } function openPanelSubTab(evt, tabName) { @@ -35,20 +35,20 @@ function openPanelSubTab(evt, tabName) { var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("panel-SubTab-Content"); + tabcontent = document.getElementsByClassName('panel-SubTab-Content'); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" - tablinks = document.getElementsByClassName("panel-SubTabs-item"); + tablinks = document.getElementsByClassName('panel-SubTabs-item'); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "flex"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'flex'; + evt.currentTarget.className += ' is-selected'; } function openCompareTab(evt, tabName) { @@ -56,20 +56,20 @@ function openCompareTab(evt, tabName) { var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("compare-Tabs-content"); + tabcontent = document.getElementsByClassName('compare-Tabs-content'); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" - tablinks = document.getElementsByClassName("compare-Tabs-item"); + tablinks = document.getElementsByClassName('compare-Tabs-item'); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "flex"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'flex'; + evt.currentTarget.className += ' is-selected'; } function openSwatchTab(evt, tabName) { @@ -77,20 +77,20 @@ function openSwatchTab(evt, tabName) { var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("swatch-Tabs-content"); + tabcontent = document.getElementsByClassName('swatch-Tabs-content'); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" - tablinks = document.getElementsByClassName("swatch-Tabs-item"); + tablinks = document.getElementsByClassName('swatch-Tabs-item'); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "flex"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'flex'; + evt.currentTarget.className += ' is-selected'; } function openTab(evt, tabName) { @@ -98,20 +98,20 @@ function openTab(evt, tabName) { var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("tabcontent"); + tabcontent = document.getElementsByClassName('tabcontent'); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" - tablinks = document.getElementsByClassName("main-Tabs-item"); + tablinks = document.getElementsByClassName('main-Tabs-item'); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "flex"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'flex'; + evt.currentTarget.className += ' is-selected'; } function openAccessibilityTab(evt, tabName) { @@ -119,45 +119,45 @@ function openAccessibilityTab(evt, tabName) { var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("a11y-Tabs-content"); + tabcontent = document.getElementsByClassName('a11y-Tabs-content'); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" - tablinks = document.getElementsByClassName("a11y-Tabs-item"); + tablinks = document.getElementsByClassName('a11y-Tabs-item'); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "flex"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'flex'; + evt.currentTarget.className += ' is-selected'; } function openDetailTab(evt, tabName, colors) { // Declare all variables var i, tabcontent, tablinks; let thisId = evt.target.id; - if (!tabName) tabName = thisId.concat("Content"); + if (!tabName) tabName = thisId.concat('Content'); // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("tabDetailContent"); + tabcontent = document.getElementsByClassName('tabDetailContent'); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" - tablinks = document.getElementsByClassName("detail-Tabs-item"); + tablinks = document.getElementsByClassName('detail-Tabs-item'); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "flex"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'flex'; + evt.currentTarget.className += ' is-selected'; - if (tabName === "tabModelContent") { + if (tabName === 'tabModelContent') { // chartData.createData(colors); // charts.init3dChart() } @@ -168,20 +168,20 @@ function openAppTab(evt, tabName) { var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("AppTab"); + tabcontent = document.getElementsByClassName('AppTab'); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" - tablinks = document.getElementsByClassName("app-Tabs-item"); + tablinks = document.getElementsByClassName('app-Tabs-item'); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "grid"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'grid'; + evt.currentTarget.className += ' is-selected'; } function openSideNavItem(evt, contentName) { @@ -189,23 +189,20 @@ function openSideNavItem(evt, contentName) { var i, sidenavcontent, sidenavlinks; // Get all elements with class="sideNavContent" and hide them - sidenavcontent = document.getElementsByClassName("sideNavContent"); + sidenavcontent = document.getElementsByClassName('sideNavContent'); for (let i = 0; i < sidenavcontent.length; i++) { - sidenavcontent[i].style.display = "none"; + sidenavcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-SideNav-item" and remove the class "is-selected" - sidenavlinks = document.getElementsByClassName("spectrum-SideNav-item"); + sidenavlinks = document.getElementsByClassName('spectrum-SideNav-item'); for (let i = 0; i < sidenavlinks.length; i++) { - sidenavlinks[i].className = sidenavlinks[i].className.replace( - " is-selected", - "", - ); + sidenavlinks[i].className = sidenavlinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(contentName).style.display = "grid"; - evt.currentTarget.parentNode.className += " is-selected"; + document.getElementById(contentName).style.display = 'grid'; + evt.currentTarget.parentNode.className += ' is-selected'; } function openColorTab(evt, tabName) { @@ -213,20 +210,20 @@ function openColorTab(evt, tabName) { var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("colorTabsWrapper"); + tabcontent = document.getElementsByClassName('colorTabsWrapper'); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" - tablinks = document.getElementsByClassName("color-Tabs-item"); + tablinks = document.getElementsByClassName('color-Tabs-item'); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "flex"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'flex'; + evt.currentTarget.className += ' is-selected'; } function openScaleTab(evt, tabName, scaleType) { @@ -236,18 +233,18 @@ function openScaleTab(evt, tabName, scaleType) { // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName(`${scaleType}TabsWrapper`); for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].style.display = 'none'; } // Get all elements with class="spectrum-Tabs-item" and remove the class "active" tablinks = document.getElementsByClassName(`${scaleType}-Tabs-item`); for (let i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" is-selected", ""); + tablinks[i].className = tablinks[i].className.replace(' is-selected', ''); } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "flex"; - evt.currentTarget.className += " is-selected"; + document.getElementById(tabName).style.display = 'flex'; + evt.currentTarget.className += ' is-selected'; } window.openPanelTab = openPanelTab; @@ -272,5 +269,5 @@ module.exports = { openSideNavItem, openScaleTab, openCompareTab, - openColorTab, + openColorTab }; diff --git a/docs/ui/src/js/themeTitle.js b/docs/ui/src/js/themeTitle.js index bf450bf0..054e44b5 100644 --- a/docs/ui/src/js/themeTitle.js +++ b/docs/ui/src/js/themeTitle.js @@ -9,30 +9,30 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -let themeTitleInput = document.getElementById("themeNameInput"); -let themeTitleTextField = document.getElementById("themeNameTextfield"); +let themeTitleInput = document.getElementById('themeNameInput'); +let themeTitleTextField = document.getElementById('themeNameTextfield'); function handleKeyUp(event) { //key code for enter if (event.keyCode === 13) { event.preventDefault(); event.target.blur(); - themeTitleTextField.classList.add("spectrum-Textfield--custom"); + themeTitleTextField.classList.add('spectrum-Textfield--custom'); let characters = themeTitleInput.value.length; themeTitleInput.style.width = `${characters + 4}ch`; } } -themeTitleInput.addEventListener("focus", () => { - themeTitleTextField.classList.remove("spectrum-Textfield--custom"); +themeTitleInput.addEventListener('focus', () => { + themeTitleTextField.classList.remove('spectrum-Textfield--custom'); themeTitleInput.style.width = `200px`; }); -themeTitleInput.addEventListener("blur", () => { - themeTitleTextField.classList.add("spectrum-Textfield--custom"); +themeTitleInput.addEventListener('blur', () => { + themeTitleTextField.classList.add('spectrum-Textfield--custom'); let characters = themeTitleInput.value.length; themeTitleInput.style.width = `${characters + 4}ch`; }); -themeTitleInput.addEventListener("keydown", (e) => { +themeTitleInput.addEventListener('keydown', (e) => { handleKeyUp(e); }); diff --git a/docs/ui/src/js/themeUpdate.js b/docs/ui/src/js/themeUpdate.js index 2010eea1..1ca17484 100644 --- a/docs/ui/src/js/themeUpdate.js +++ b/docs/ui/src/js/themeUpdate.js @@ -9,19 +9,19 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import hljs from "highlight.js/lib/core"; -import { _theme } from "./initialTheme"; -import { createPaletteCharts } from "./createPaletteCharts"; -import { getThemeContrastRatios, getLuminosities } from "./getThemeData"; -import { createOutputColors } from "./createOutputColors"; -import { createRatioChart, createLuminosityChart } from "./createRatioChart"; -import { updateColorDots } from "./colorWheel"; -import { createOutputParameters } from "./createOutputParameters"; -import { throttle } from "./utils"; -import { create3dModel } from "./create3dModel"; +import hljs from 'highlight.js/lib/core'; +import {_theme} from './initialTheme'; +import {createPaletteCharts} from './createPaletteCharts'; +import {getThemeContrastRatios, getLuminosities} from './getThemeData'; +import {createOutputColors} from './createOutputColors'; +import {createRatioChart, createLuminosityChart} from './createRatioChart'; +import {updateColorDots} from './colorWheel'; +import {createOutputParameters} from './createOutputParameters'; +import {throttle} from './utils'; +import {create3dModel} from './create3dModel'; -import javascript from "highlight.js/lib/languages/javascript"; -hljs.registerLanguage("javascript", javascript); +import javascript from 'highlight.js/lib/languages/javascript'; +hljs.registerLanguage('javascript', javascript); function themeUpdate() { createOutputColors(); @@ -33,12 +33,12 @@ function themeUpdate() { }); // Create dots for color wheel - let colorWheelModeDropdown = document.getElementById("chartsMode"); + let colorWheelModeDropdown = document.getElementById('chartsMode'); let colorWheelMode = colorWheelModeDropdown.value; createPaletteCharts(colorWheelMode); - updateColorDots(null, "theme"); - create3dModel("paletteModelWrapper", _theme.colors, colorWheelMode); + updateColorDots(null, 'theme'); + create3dModel('paletteModelWrapper', _theme.colors, colorWheelMode); let chartLuminosities = Promise.resolve(getLuminosities()); chartLuminosities.then(function (resolve) { @@ -52,50 +52,46 @@ function themeUpdateParams() { // Toggle disabled state of adaptive theme controls function toggleControls() { - let items = document.getElementsByClassName("themeColor_item"); - let brightnessSliderWrap = document.getElementById("brightnessSliderWrapper"); - let brightnessSlider = document.getElementById("themeBrightnessSlider"); - let contrastSliderWrap = document.getElementById("contrastSliderWrapper"); - let contrastSlider = document.getElementById("themeContrastSlider"); - let saturationSliderWrap = document.getElementById("saturationSliderWrapper"); - let saturationSlider = document.getElementById("themeSaturationSlider"); - let themeBaseLabel = document.getElementById("themeBaseLabel"); - let baseSelect = document.getElementById("themeBase"); + let items = document.getElementsByClassName('themeColor_item'); + let brightnessSliderWrap = document.getElementById('brightnessSliderWrapper'); + let brightnessSlider = document.getElementById('themeBrightnessSlider'); + let contrastSliderWrap = document.getElementById('contrastSliderWrapper'); + let contrastSlider = document.getElementById('themeContrastSlider'); + let saturationSliderWrap = document.getElementById('saturationSliderWrapper'); + let saturationSlider = document.getElementById('themeSaturationSlider'); + let themeBaseLabel = document.getElementById('themeBaseLabel'); + let baseSelect = document.getElementById('themeBase'); if (items.length > 0) { // if there are items, enable fields - brightnessSliderWrap.classList.remove("is-disabled"); - contrastSliderWrap.classList.remove("is-disabled"); - saturationSliderWrap.classList.remove("is-disabled"); - themeBaseLabel.classList.remove("is-disabled"); - baseSelect.classList.remove("is-disabled"); + brightnessSliderWrap.classList.remove('is-disabled'); + contrastSliderWrap.classList.remove('is-disabled'); + saturationSliderWrap.classList.remove('is-disabled'); + themeBaseLabel.classList.remove('is-disabled'); + baseSelect.classList.remove('is-disabled'); brightnessSlider.disabled = false; contrastSlider.disabled = false; saturationSlider.disabled = false; baseSelect.disabled = false; } else if (items.length == 0) { // disable fields - brightnessSliderWrap.classList.add("is-disabled"); - contrastSliderWrap.classList.add("is-disabled"); - saturationSliderWrap.classList.add("is-disabled"); - themeBaseLabel.classList.add("is-disabled"); - baseSelect.classList.add("is-disabled"); + brightnessSliderWrap.classList.add('is-disabled'); + contrastSliderWrap.classList.add('is-disabled'); + saturationSliderWrap.classList.add('is-disabled'); + themeBaseLabel.classList.add('is-disabled'); + baseSelect.classList.add('is-disabled'); brightnessSlider.disabled = true; contrastSlider.disabled = true; saturationSlider.disabled = true; baseSelect.disabled = true; - baseSelect.value = " "; + baseSelect.value = ' '; } } // Update theme when theme name is changed -document - .getElementById("themeNameInput") - .addEventListener("change", throttle(themeUpdateParams, 50)); +document.getElementById('themeNameInput').addEventListener('change', throttle(themeUpdateParams, 50)); // Update theme when base color selection is changed -document - .getElementById("themeBase") - .addEventListener("input", throttle(themeUpdateParams, 50)); +document.getElementById('themeBase').addEventListener('input', throttle(themeUpdateParams, 50)); window.themeUpdate = themeUpdate; window.themeUpdateParams = themeUpdateParams; @@ -103,5 +99,5 @@ window.themeUpdateParams = themeUpdateParams; module.exports = { themeUpdate, themeUpdateParams, - toggleControls, + toggleControls }; diff --git a/docs/ui/src/js/toast.js b/docs/ui/src/js/toast.js index 4c7643b5..8ff0e42c 100644 --- a/docs/ui/src/js/toast.js +++ b/docs/ui/src/js/toast.js @@ -9,39 +9,39 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { themeUpdate } from "./themeUpdate"; +import {themeUpdate} from './themeUpdate'; function showToast() { - let toast = document.getElementById("toastCVDpreview"); - if (toast.classList.contains("is-visible")) { + let toast = document.getElementById('toastCVDpreview'); + if (toast.classList.contains('is-visible')) { // do nothing } else { - toast.classList.remove("spectrum-Exit"); - toast.classList.add("spectrum-Bounce"); - toast.classList.add("is-visible"); + toast.classList.remove('spectrum-Exit'); + toast.classList.add('spectrum-Bounce'); + toast.classList.add('is-visible'); } } function hideToast() { - let toast = document.getElementById("toastCVDpreview"); - toast.classList.remove("spectrum-Bounce"); - toast.classList.add("spectrum-Exit"); - toast.classList.remove("is-visible"); + let toast = document.getElementById('toastCVDpreview'); + toast.classList.remove('spectrum-Bounce'); + toast.classList.add('spectrum-Exit'); + toast.classList.remove('is-visible'); } function exitPreview() { - cvdModeDropdown.value = "None"; + cvdModeDropdown.value = 'None'; themeUpdate(); hideToast(); } function neverShowToast() { - let toast = document.getElementById("toastCVDpreview"); - toast.classList.remove("spectrum-Bounce"); - toast.classList.add("spectrum-Exit"); - toast.classList.remove("is-visible"); - toast.classList.add("hidden"); + let toast = document.getElementById('toastCVDpreview'); + toast.classList.remove('spectrum-Bounce'); + toast.classList.add('spectrum-Exit'); + toast.classList.remove('is-visible'); + toast.classList.add('hidden'); } window.showToast = showToast; @@ -53,5 +53,5 @@ module.exports = { showToast, hideToast, exitPreview, - neverShowToast, + neverShowToast }; diff --git a/docs/ui/src/js/toggleSwatchAttributes.js b/docs/ui/src/js/toggleSwatchAttributes.js index 3c1523f4..38ef5a16 100644 --- a/docs/ui/src/js/toggleSwatchAttributes.js +++ b/docs/ui/src/js/toggleSwatchAttributes.js @@ -11,23 +11,23 @@ governing permissions and limitations under the License. function toggleSwatchContrast(e) { let on = e.target.checked; - let wrapper = document.getElementById("swatchesOutputs"); + let wrapper = document.getElementById('swatchesOutputs'); if (!on) { - wrapper.classList.add("hideSwatchContrast"); + wrapper.classList.add('hideSwatchContrast'); } else { - wrapper.classList.remove("hideSwatchContrast"); + wrapper.classList.remove('hideSwatchContrast'); } } function toggleSwatchLuminosity(e) { let on = e.target.checked; - let wrapper = document.getElementById("swatchesOutputs"); + let wrapper = document.getElementById('swatchesOutputs'); if (!on) { - wrapper.classList.add("hideSwatchLuminosity"); + wrapper.classList.add('hideSwatchLuminosity'); } else { - wrapper.classList.remove("hideSwatchLuminosity"); + wrapper.classList.remove('hideSwatchLuminosity'); } } @@ -36,5 +36,5 @@ window.toggleSwatchLuminosity = toggleSwatchLuminosity; module.exports = { toggleSwatchContrast, - toggleSwatchLuminosity, + toggleSwatchLuminosity }; diff --git a/docs/ui/src/js/tooltip.js b/docs/ui/src/js/tooltip.js index 2bfcda99..ac67a804 100644 --- a/docs/ui/src/js/tooltip.js +++ b/docs/ui/src/js/tooltip.js @@ -11,13 +11,13 @@ governing permissions and limitations under the License. function toggleTooltip(targetId) { let tooltip = document.getElementById(targetId); - if (!tooltip.classList.contains("is-open")) { - tooltip.classList.add("is-open"); + if (!tooltip.classList.contains('is-open')) { + tooltip.classList.add('is-open'); } else { - tooltip.classList.remove("is-open"); + tooltip.classList.remove('is-open'); } } window.toggleTooltip = toggleTooltip; -module.exports = { toggleTooltip }; +module.exports = {toggleTooltip}; diff --git a/docs/ui/src/js/utils.js b/docs/ui/src/js/utils.js index 390ddaa4..cc5ad82b 100644 --- a/docs/ui/src/js/utils.js +++ b/docs/ui/src/js/utils.js @@ -8,13 +8,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import * as d3 from "./d3"; -import { simulate } from "@bjornlu/colorblind"; -const blinder = require("color-blind"); +import * as d3 from './d3'; +import {simulate} from '@bjornlu/colorblind'; +const blinder = require('color-blind'); -const chroma = require("chroma-js"); -const { extendChroma } = require("./chroma-plus"); -const DeltaE = require("delta-e"); +const chroma = require('chroma-js'); +const {extendChroma} = require('./chroma-plus'); +const DeltaE = require('delta-e'); extendChroma(chroma); @@ -23,7 +23,7 @@ window.chroma = chroma; function randomId() { return Math.random() .toString(36) - .replace(/[^a-z]+/g, "") + .replace(/[^a-z]+/g, '') .substr(2, 10); } @@ -46,7 +46,7 @@ function throttle(func, wait) { lastRan = Date.now(); } }, - wait - (Date.now() - lastRan) || 0, + wait - (Date.now() - lastRan) || 0 ); } }; @@ -57,7 +57,7 @@ function camelCase(str) { .replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) { return index === 0 ? word.toLowerCase() : word.toUpperCase(); }) - .replace(/\s+/g, ""); + .replace(/\s+/g, ''); } function convertToCartesian(s, h, clamp) { @@ -71,7 +71,7 @@ function convertToCartesian(s, h, clamp) { return { x: xAxis, - y: yAxis, + y: yAxis }; } @@ -103,40 +103,40 @@ const lerp = (x, y, a) => x * (1 - a) + y * a; // Copied directly from contrast-colors. For some reason it would // not import properly. const colorSpaces = { - CAM02: "jab", - CAM02p: "jch", - HEX: "hex", - HSL: "hsl", - HSLuv: "hsluv", - HSV: "hsv", - LAB: "lab", - LCH: "lch", // named per correct color definition order - RGB: "rgb", + CAM02: 'jab', + CAM02p: 'jch', + HEX: 'hex', + HSL: 'hsl', + HSLuv: 'hsluv', + HSV: 'hsv', + LAB: 'lab', + LCH: 'lch', // named per correct color definition order + RGB: 'rgb' }; function cssColorToRgb(colorString) { let colorStringArr, newColor, inputFormat; if (colorString.match(/^hsl\(/)) { - inputFormat = "hsl"; + inputFormat = 'hsl'; } if (colorString.match(/^hsv\(/)) { - inputFormat = "hsv"; + inputFormat = 'hsv'; } if (colorString.match(/^lab\(/)) { - inputFormat = "lab"; + inputFormat = 'lab'; } if (colorString.match(/^lch\(/)) { - inputFormat = "lch"; + inputFormat = 'lch'; } if (colorString.match(/^jab\(/)) { - inputFormat = "jab"; + inputFormat = 'jab'; } if (colorString.match(/^jch\(/)) { - inputFormat = "jch"; + inputFormat = 'jch'; } if (colorString.match(/^hsluv\(/)) { - inputFormat = "hsluv"; + inputFormat = 'hsluv'; } if (!colorString) { @@ -145,20 +145,18 @@ function cssColorToRgb(colorString) { let colorStringNums = colorString .match(/\(.*?\)/g) .toString() - .replace("(", "") - .replace(")", "") - .replaceAll("%", "") - .replace("deg", "") + .replace('(', '') + .replace(')', '') + .replaceAll('%', '') + .replace('deg', '') .trim(); // find numbers only - colorStringArr = colorStringNums.split(","); // split numbers into array + colorStringArr = colorStringNums.split(','); // split numbers into array colorStringArr = colorStringArr.map((c) => { return filterNaN(Number(c)); }); let c1 = colorStringArr[0]; - let c2 = - inputFormat === "hsl" ? colorStringArr[1] / 100 : colorStringArr[1]; - let c3 = - inputFormat === "hsl" ? colorStringArr[2] / 100 : colorStringArr[2]; + let c2 = inputFormat === 'hsl' ? colorStringArr[1] / 100 : colorStringArr[1]; + let c3 = inputFormat === 'hsl' ? colorStringArr[2] / 100 : colorStringArr[2]; newColor = chroma(c1, c2, c3, inputFormat); return newColor.hex(); @@ -192,13 +190,13 @@ function convertColorValue(color, format, object = false) { const space = colorSpaces[format]; const colorObj = chroma(String(color))[space](); - if (format === "HSL") { + if (format === 'HSL') { colorObj.pop(); } - if (format === "HEX") { + if (format === 'HEX') { if (object) { const rgb = chroma(String(color)).rgb(); - return { r: rgb[0], g: rgb[1], b: rgb[2] }; + return {r: rgb[0], g: rgb[1], b: rgb[2]}; } return colorObj; } @@ -209,39 +207,39 @@ function convertColorValue(color, format, object = false) { newColorObj = newColorObj.map((ch, i) => { let rnd = round(ch); let j = i; - if (space === "hsluv") { + if (space === 'hsluv') { j += 2; } let letter = space.charAt(j); - if (space === "jch" && letter === "c") { - letter = "C"; + if (space === 'jch' && letter === 'c') { + letter = 'C'; } - colorObject[letter === "j" ? "J" : letter] = rnd; - if (space in { lab: 1, lch: 1, jab: 1, jch: 1 }) { + colorObject[letter === 'j' ? 'J' : letter] = rnd; + if (space in {lab: 1, lch: 1, jab: 1, jch: 1}) { if (!object) { - if (letter === "l" || letter === "j") { - rnd += "%"; + if (letter === 'l' || letter === 'j') { + rnd += '%'; } - if (letter === "h") { - rnd += "deg"; + if (letter === 'h') { + rnd += 'deg'; } } - } else if (space !== "hsluv") { - if (letter === "s" || letter === "l" || letter === "v") { + } else if (space !== 'hsluv') { + if (letter === 's' || letter === 'l' || letter === 'v') { colorObject[letter] = round(ch, 2); if (!object) { rnd = round(ch * 100); - rnd += "%"; + rnd += '%'; } - } else if (letter === "h" && !object) { - rnd += "deg"; + } else if (letter === 'h' && !object) { + rnd += 'deg'; } } return rnd; }); const stringName = space; - const stringValue = `${stringName}(${newColorObj.join(", ")})`; + const stringValue = `${stringName}(${newColorObj.join(', ')})`; if (object) { return colorObject; @@ -271,21 +269,15 @@ function removeDuplicates(originalArray, prop) { function findMatchingLuminosity(colorScale, colorLen, luminosities, smooth) { const colorSearch = (x) => { - const first = smooth - ? chroma(colorScale(0)).hsluv()[2] - : colorScale(0).hsluv()[2]; - const last = smooth - ? chroma(colorScale(colorLen)).hsluv()[2] - : colorScale(colorLen).hsluv()[2]; + const first = smooth ? chroma(colorScale(0)).hsluv()[2] : colorScale(0).hsluv()[2]; + const last = smooth ? chroma(colorScale(colorLen)).hsluv()[2] : colorScale(colorLen).hsluv()[2]; const dir = first < last ? 1 : -1; const ε = 0.01; x += 0.005 * Math.sign(x); let step = colorLen / 2; let dot = step; - let val = smooth - ? chroma(colorScale(dot)).hsluv()[2] - : colorScale(dot).hsluv()[2]; + let val = smooth ? chroma(colorScale(dot)).hsluv()[2] : colorScale(dot).hsluv()[2]; let counter = 100; while (Math.abs(val - x) > ε && counter) { counter--; @@ -295,9 +287,7 @@ function findMatchingLuminosity(colorScale, colorLen, luminosities, smooth) { } else { dot -= step * dir; } - val = smooth - ? chroma(colorScale(dot)).hsluv()[2] - : colorScale(dot).hsluv()[2]; + val = smooth ? chroma(colorScale(dot)).hsluv()[2] : colorScale(dot).hsluv()[2]; } return round(dot, 3); }; @@ -318,8 +308,8 @@ function getColorDifference(color1, color2) { // pre-formatting and running through specific deltaE formula let c1 = chroma(color1).lab(); let c2 = chroma(color2).lab(); - let c1Lab = { L: c1[0], A: c1[1], B: c1[2] }; - let c2Lab = { L: c2[0], A: c2[1], B: c2[2] }; + let c1Lab = {L: c1[0], A: c1[1], B: c1[2]}; + let c2Lab = {L: c2[0], A: c2[1], B: c2[2]}; // Use DeltaE 2000 formula (latest) return DeltaE.getDeltaE00(c1Lab, c2Lab); } @@ -332,7 +322,7 @@ function groupCommonHues(colors) { // should become: [ ['yellow', 'lightyellow'], ['blue'], ['green', 'lightgreen'] ] // First, resort colors by hue - let orderedColors = orderColors(colors, "hue", "saturation"); + let orderedColors = orderColors(colors, 'hue', 'saturation'); // Acceptable difference in hues const hueGroupThreshold = 22; // 10 const hueThreshold = 22; // 10 @@ -345,11 +335,7 @@ function groupCommonHues(colors) { const minLuma = 8; let filteredColors = []; for (let i = 0; i < colors.length; i++) { - if ( - chroma(orderedColors[i]).lch()[1] > minChroma && - chroma(orderedColors[i]).lch()[0] > minLuma - ) - filteredColors.push(orderedColors[i]); + if (chroma(orderedColors[i]).lch()[1] > minChroma && chroma(orderedColors[i]).lch()[0] > minLuma) filteredColors.push(orderedColors[i]); else continue; } @@ -388,11 +374,7 @@ function groupCommonHues(colors) { // if minimum color difference of currentColor, when compared to all colors of // the current bucket.. - if ( - minDiff > colorDifferenceMin && - maxDiff < colorDifferenceMax && - minHueDiff <= hueThreshold - ) { + if (minDiff > colorDifferenceMin && maxDiff < colorDifferenceMax && minHueDiff <= hueThreshold) { currentBucket.push(currentColor); } } @@ -415,13 +397,11 @@ function getRandomInt(max) { * by hue and lightness */ function orderColors(colors, priority1, priority2, random = false) { - let validOptions = ["hue", "saturation", "lightness"]; + let validOptions = ['hue', 'saturation', 'lightness']; for (let i = 0; i < validOptions.length; i++) { - if (!validOptions.includes(priority1)) - console.warn(`${priority1} is not a valid option of ${validOptions}`); + if (!validOptions.includes(priority1)) console.warn(`${priority1} is not a valid option of ${validOptions}`); if (priority2) { - if (!validOptions.includes(priority2)) - console.warn(`${priority1} is not a valid option of ${validOptions}`); + if (!validOptions.includes(priority2)) console.warn(`${priority1} is not a valid option of ${validOptions}`); } } // for each color, convert to lch object @@ -432,22 +412,14 @@ function orderColors(colors, priority1, priority2, random = false) { saturation: Math.floor(jch[1]), lightness: Math.floor(jch[0]), color, - index: i, + index: i }; }); let sorted; if (priority2) { // Sort by priority 1, then by priority 1 - sorted = colorsJch.sort((a, b) => - a[priority1] > b[priority1] - ? 1 - : a[priority1] === b[priority1] - ? a[priority2] > b[priority2] - ? 1 - : -1 - : -1, - ); + sorted = colorsJch.sort((a, b) => (a[priority1] > b[priority1] ? 1 : a[priority1] === b[priority1] ? (a[priority2] > b[priority2] ? 1 : -1) : -1)); } else { sorted = colorsJch.sort((a, b) => (a[priority1] > b[priority1] ? 1 : -1)); } @@ -455,7 +427,7 @@ function orderColors(colors, priority1, priority2, random = false) { // Create random "starting point" for hues // Only useful in CVD scenario if (random) { - if (priority1 === "hue") { + if (priority1 === 'hue') { let randomIndex = getRandomInt(sorted.length); let firstHalf = sorted.splice(0, randomIndex); let secondHalf = sorted.splice(randomIndex); @@ -480,10 +452,7 @@ function shuffleArray(array) { currentIndex--; // And swap it with the current element. - [array[currentIndex], array[randomIndex]] = [ - array[randomIndex], - array[currentIndex], - ]; + [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]; } return array; @@ -496,38 +465,22 @@ function createColorData(color, mode) { let dataA = color.map(function (d) { let channelValue = method(d)[f.c1]; // Need to do some geometry for polar colorspaces - if ( - mode === "CAM02p" || - mode === "LCH" || - mode === "HSL" || - mode === "HSV" || - mode === "HSLuv" - ) { - let s = - mode === "HSL" || mode === "HSV" - ? method(d)[f.c2] * 100 - : method(d)[f.c2]; + if (mode === 'CAM02p' || mode === 'LCH' || mode === 'HSL' || mode === 'HSV' || mode === 'HSLuv') { + let s = mode === 'HSL' || mode === 'HSV' ? method(d)[f.c2] * 100 : method(d)[f.c2]; let h = channelValue; return filterNaN(convertToCartesian(s, h).x); } else return filterNaN(channelValue); }); let dataB = color.map(function (d) { let channelValue = method(d)[f.c3]; - if (mode === "HSL" || mode === "HSV") channelValue = channelValue * 100; + if (mode === 'HSL' || mode === 'HSV') channelValue = channelValue * 100; return filterNaN(channelValue); }); let dataC = color.map(function (d) { let channelValue = method(d)[f.c2]; // Need to do some geometry for polar colorspaces - if ( - mode === "CAM02p" || - mode === "LCH" || - mode === "HSL" || - mode === "HSV" || - mode === "HSLuv" - ) { - let s = - mode === "HSL" || mode === "HSV" ? channelValue * 100 : channelValue; + if (mode === 'CAM02p' || mode === 'LCH' || mode === 'HSL' || mode === 'HSV' || mode === 'HSLuv') { + let s = mode === 'HSL' || mode === 'HSV' ? channelValue * 100 : channelValue; let h = method(d)[f.c1]; return filterNaN(convertToCartesian(s, h).y); } @@ -537,14 +490,14 @@ function createColorData(color, mode) { return { a: dataA, b: dataB, - c: dataC, + c: dataC }; } function getChannelsAndFunction(mode) { let c1, c2, c3, func, yMin, yMax, yMin2, yMax2, c1Label, c2Label, c3Label; - if (mode === "RGB") { - func = "hsl"; + if (mode === 'RGB') { + func = 'hsl'; c1 = 0; c1Label = `Hue (HSL - H)`; c2 = 1; @@ -556,8 +509,8 @@ function getChannelsAndFunction(mode) { yMin2 = 0; yMax2 = 1; } - if (mode === "LAB") { - func = "lab"; + if (mode === 'LAB') { + func = 'lab'; c1 = 1; c1Label = `Redness / Greenness (${mode} - A)`; c2 = 2; @@ -565,8 +518,8 @@ function getChannelsAndFunction(mode) { c3 = 0; c3Label = `Lightness (${mode} - L)`; } - if (mode === "LCH") { - func = "lch"; + if (mode === 'LCH') { + func = 'lch'; c1 = 2; c1Label = `Hue (${mode} - H)`; c2 = 1; @@ -576,8 +529,8 @@ function getChannelsAndFunction(mode) { yMin = 0; yMax = 360; } - if (mode === "OKLAB") { - func = "oklab"; + if (mode === 'OKLAB') { + func = 'oklab'; c1 = 1; c1Label = `Redness / Greenness (${mode} - A)`; c2 = 2; @@ -585,8 +538,8 @@ function getChannelsAndFunction(mode) { c3 = 0; c3Label = `Lightness (${mode} - L)`; } - if (mode === "OKLCH") { - func = "oklch"; + if (mode === 'OKLCH') { + func = 'oklch'; c1 = 2; c1Label = `Hue (${mode} - H)`; c2 = 1; @@ -597,8 +550,8 @@ function getChannelsAndFunction(mode) { yMax = 360; yMax2 = 0.322; } - if (mode === "CAM02") { - func = "jab"; + if (mode === 'CAM02') { + func = 'jab'; c1 = 1; c1Label = `Redness / Greenness (${mode} - A)`; c2 = 2; @@ -606,8 +559,8 @@ function getChannelsAndFunction(mode) { c3 = 0; c3Label = `Lightness (${mode} - J)`; } - if (mode === "CAM02p") { - func = "jch"; + if (mode === 'CAM02p') { + func = 'jch'; c1 = 2; c1Label = `Hue (CAM02 (Ch) - H)`; c2 = 1; @@ -617,8 +570,8 @@ function getChannelsAndFunction(mode) { yMin = 0; yMax = 360; } - if (mode === "HSL") { - func = "hsl"; + if (mode === 'HSL') { + func = 'hsl'; c1 = 0; c1Label = `Hue (${mode} - H)`; c2 = 1; @@ -630,8 +583,8 @@ function getChannelsAndFunction(mode) { yMin2 = 0; yMax2 = 1; } - if (mode === "HSLuv") { - func = "hsluv"; + if (mode === 'HSLuv') { + func = 'hsluv'; c1 = 0; c1Label = `Hue (${mode} - H)`; c2 = 1; @@ -643,8 +596,8 @@ function getChannelsAndFunction(mode) { yMin2 = 0; yMax2 = 100; } - if (mode === "HSV") { - func = "hsv"; + if (mode === 'HSV') { + func = 'hsv'; c1 = 0; c1Label = `Hue (${mode} - H)`; c2 = 1; @@ -668,7 +621,7 @@ function getChannelsAndFunction(mode) { yMin: yMin, yMax: yMax, yMin2: yMin2, - yMax2: yMax2, + yMax2: yMax2 }; } @@ -676,19 +629,19 @@ function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } -function orderColorsByLuminosity(colors, direction = "toLight") { +function orderColorsByLuminosity(colors, direction = 'toLight') { // 'toLight' or 'toDark' let luminosities = colors.map((color, index) => { return { color: color, - luminosity: d3.hsluv(color).v, + luminosity: d3.hsluv(color).v }; }); - if (direction === "toLight") { + if (direction === 'toLight') { luminosities.sort((a, b) => (a.luminosity < b.luminosity ? 1 : -1)); return luminosities.map((c) => c.color); } - if (direction === "toDark") { + if (direction === 'toDark') { luminosities.sort((a, b) => (a.luminosity < b.luminosity ? -1 : 1)); return luminosities.map((c) => c.color); } else { @@ -703,7 +656,7 @@ function orderColorsByLuminosity(colors, direction = "toLight") { // than a sharp midpoint. function createEquiLuminantKey(middleKey, colorKeys) { let luminance = d3.jch(middleKey).J; - let sorted = orderColorsByLuminosity(colorKeys, "toLight"); + let sorted = orderColorsByLuminosity(colorKeys, 'toLight'); let lightestColor = sorted[0]; let hue = d3.jch(lightestColor).h; let chroma = 8; @@ -720,10 +673,10 @@ function createEquiLuminantKey(middleKey, colorKeys) { * console.log(simulateCvd('rgb(120, 50, 30)', 'protanopia')) * returns {r: 62, g: 62, b: 30} */ -function simulateCvd(color, deficiency, lib = "color-blind") { +function simulateCvd(color, deficiency, lib = 'color-blind') { if (!color) console.warn(`${color} is invalid`); let cRgb = chroma(color).rgb(); - let c = { r: cRgb[0], g: cRgb[1], b: cRgb[2] }; + let c = {r: cRgb[0], g: cRgb[1], b: cRgb[2]}; let sim, simRgb; /* Added conditions so that I can easily swap between CVD simulation * libraries. This is helpful to see any discrepancies between @@ -732,18 +685,14 @@ function simulateCvd(color, deficiency, lib = "color-blind") { * Note: color-blind library is closer in alignment with Sim Daltonism, * color-blindness.com and other online simulators. */ - if (lib === "bjornlu") { + if (lib === 'bjornlu') { sim = simulate(c, deficiency); simRgb = chroma.rgb(sim.r, sim.g, sim.b).hex(); - } else if (lib === "color-blind") { - if (deficiency === "deuteranopia") - sim = blinder.deuteranopia(chroma(color).hex()); - if (deficiency === "protanopia") - sim = blinder.protanopia(chroma(color).hex()); - if (deficiency === "tritanopia") - sim = blinder.tritanopia(chroma(color).hex()); - if (deficiency === "achromatopsia") - sim = blinder.achromatopsia(chroma(color).hex()); + } else if (lib === 'color-blind') { + if (deficiency === 'deuteranopia') sim = blinder.deuteranopia(chroma(color).hex()); + if (deficiency === 'protanopia') sim = blinder.protanopia(chroma(color).hex()); + if (deficiency === 'tritanopia') sim = blinder.tritanopia(chroma(color).hex()); + if (deficiency === 'achromatopsia') sim = blinder.achromatopsia(chroma(color).hex()); simRgb = sim; } @@ -767,8 +716,8 @@ function getDifference(color1, color2) { // pre-formatting and running through specific deltaE formula let c1 = chroma(color1).lab(); let c2 = chroma(color2).lab(); - let c1Lab = { L: c1[0], A: c1[1], B: c1[2] }; - let c2Lab = { L: c2[0], A: c2[1], B: c2[2] }; + let c1Lab = {L: c1[0], A: c1[1], B: c1[2]}; + let c2Lab = {L: c2[0], A: c2[1], B: c2[2]}; // Use DeltaE 2000 formula (latest) return DeltaE.getDeltaE00(c1Lab, c2Lab); } @@ -820,12 +769,12 @@ function getLightness(color) { function colorPickerInput(e) { if (e !== undefined) { let id = e.target.id; - let inputId = id.replace("_picker", "Input"); + let inputId = id.replace('_picker', 'Input'); let value = e.target.value; let color = chroma(value); let input = document.getElementById(inputId); input.value = chroma(color).hex(); - input.dispatchEvent(new Event("input")); + input.dispatchEvent(new Event('input')); } } @@ -859,5 +808,5 @@ module.exports = { getChannelsAndFunction, orderColorsByLuminosity, shuffleArray, - colorPickerInput, + colorPickerInput }; diff --git a/docs/ui/src/scales.html b/docs/ui/src/scales.html index de85823c..f46faa78 100644 --- a/docs/ui/src/scales.html +++ b/docs/ui/src/scales.html @@ -1,43 +1,41 @@ - - + - + - +
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- +
+ - - - - - - - - + + + + +
- + diff --git a/docs/ui/src/scales.js b/docs/ui/src/scales.js index 2749321a..9bf0aaa6 100644 --- a/docs/ui/src/scales.js +++ b/docs/ui/src/scales.js @@ -10,126 +10,118 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import "@spectrum-css/vars/dist/spectrum-global.css"; -import "@spectrum-css/vars/dist/spectrum-medium.css"; -import "@spectrum-css/vars/dist/spectrum-light.css"; -import "@spectrum-css/vars/dist/spectrum-darkest.css"; - -import "@spectrum-css/page/dist/index-vars.css"; -import "@spectrum-css/icon/dist/index-vars.css"; -import "@spectrum-css/link/dist/index-vars.css"; -import "@spectrum-css/alert/dist/index-vars.css"; -import "@spectrum-css/radio/dist/index-vars.css"; -import "@spectrum-css/sidenav/dist/index-vars.css"; -import "@spectrum-css/dialog/dist/index-vars.css"; -import "@spectrum-css/button/dist/index-vars.css"; -import "@spectrum-css/badge/dist/index-vars.css"; -import "@spectrum-css/actionbutton/dist/index-vars.css"; -import "@spectrum-css/actiongroup/dist/index-vars.css"; -import "@spectrum-css/divider/dist/index-vars.css"; -import "@spectrum-css/fieldgroup/dist/index-vars.css"; -import "@spectrum-css/textfield/dist/index-vars.css"; -import "@spectrum-css/picker/dist/index-vars.css"; -import "@spectrum-css/fieldlabel/dist/index-vars.css"; -import "@spectrum-css/checkbox/dist/index-vars.css"; -import "@spectrum-css/switch/dist/index-vars.css"; -import "@spectrum-css/buttongroup/dist/index-vars.css"; -import "@spectrum-css/tooltip/dist/index-vars.css"; -import "@spectrum-css/slider/dist/index-vars.css"; -import "@spectrum-css/tabs/dist/index-vars.css"; -import "@spectrum-css/toast/dist/index-vars.css"; -import "@spectrum-css/illustratedmessage/dist/index-vars.css"; -import "@spectrum-css/typography/dist/index-vars.css"; -import "@spectrum-css/progresscircle/dist/index-vars.css"; -import "@spectrum-css/table/dist/index-vars.css"; -import "@spectrum-css/progressbar/dist/index-vars.css"; - -import "./scss/style.scss"; -import "./scss/charts.scss"; -import "./scss/colorinputs.scss"; -import "./scss/style.scss"; -import "./scss/components/articleCard.scss"; -import "./scss/components/colorPicker.scss"; -import "./scss/components/colorSlider.scss"; -import "./scss/components/dialog.scss"; -import "./scss/components/header.scss"; -import "./scss/components/highlightCode.scss"; -import "./scss/components/imageUploader.scss"; -import "./scss/components/outputSwatches.scss"; -import "./scss/components/panelAccordion.scss"; -import "./scss/components/popover.scss"; -import "./scss/components/sections.scss"; -import "./scss/components/selectBox.scss"; -import "./scss/components/statusLabel.scss"; -import "./scss/components/textfield.scss"; -import "./scss/components/toast.scss"; -import "./scss/components/tooltip.scss"; - -import "@adobe/focus-ring-polyfill"; -import { pageLoader } from "./js/pageLoader"; - -import * as Leo from "@adobe/leonardo-contrast-colors"; -import loadIcons from "loadicons"; -loadIcons("./spectrum-css-icons.svg"); -loadIcons("./spectrum-icons.svg"); +import '@spectrum-css/vars/dist/spectrum-global.css'; +import '@spectrum-css/vars/dist/spectrum-medium.css'; +import '@spectrum-css/vars/dist/spectrum-light.css'; +import '@spectrum-css/vars/dist/spectrum-darkest.css'; + +import '@spectrum-css/page/dist/index-vars.css'; +import '@spectrum-css/icon/dist/index-vars.css'; +import '@spectrum-css/link/dist/index-vars.css'; +import '@spectrum-css/alert/dist/index-vars.css'; +import '@spectrum-css/radio/dist/index-vars.css'; +import '@spectrum-css/sidenav/dist/index-vars.css'; +import '@spectrum-css/dialog/dist/index-vars.css'; +import '@spectrum-css/button/dist/index-vars.css'; +import '@spectrum-css/badge/dist/index-vars.css'; +import '@spectrum-css/actionbutton/dist/index-vars.css'; +import '@spectrum-css/actiongroup/dist/index-vars.css'; +import '@spectrum-css/divider/dist/index-vars.css'; +import '@spectrum-css/fieldgroup/dist/index-vars.css'; +import '@spectrum-css/textfield/dist/index-vars.css'; +import '@spectrum-css/picker/dist/index-vars.css'; +import '@spectrum-css/fieldlabel/dist/index-vars.css'; +import '@spectrum-css/checkbox/dist/index-vars.css'; +import '@spectrum-css/switch/dist/index-vars.css'; +import '@spectrum-css/buttongroup/dist/index-vars.css'; +import '@spectrum-css/tooltip/dist/index-vars.css'; +import '@spectrum-css/slider/dist/index-vars.css'; +import '@spectrum-css/tabs/dist/index-vars.css'; +import '@spectrum-css/toast/dist/index-vars.css'; +import '@spectrum-css/illustratedmessage/dist/index-vars.css'; +import '@spectrum-css/typography/dist/index-vars.css'; +import '@spectrum-css/progresscircle/dist/index-vars.css'; +import '@spectrum-css/table/dist/index-vars.css'; +import '@spectrum-css/progressbar/dist/index-vars.css'; + +import './scss/style.scss'; +import './scss/charts.scss'; +import './scss/colorinputs.scss'; +import './scss/style.scss'; +import './scss/components/articleCard.scss'; +import './scss/components/colorPicker.scss'; +import './scss/components/colorSlider.scss'; +import './scss/components/dialog.scss'; +import './scss/components/header.scss'; +import './scss/components/highlightCode.scss'; +import './scss/components/imageUploader.scss'; +import './scss/components/outputSwatches.scss'; +import './scss/components/panelAccordion.scss'; +import './scss/components/popover.scss'; +import './scss/components/sections.scss'; +import './scss/components/selectBox.scss'; +import './scss/components/statusLabel.scss'; +import './scss/components/textfield.scss'; +import './scss/components/toast.scss'; +import './scss/components/tooltip.scss'; + +import '@adobe/focus-ring-polyfill'; +import {pageLoader} from './js/pageLoader'; + +import * as Leo from '@adobe/leonardo-contrast-colors'; +import loadIcons from 'loadicons'; +loadIcons('./spectrum-css-icons.svg'); +loadIcons('./spectrum-icons.svg'); // Import local Javascript functions -import { _sequentialScale } from "./js/initialSequentialScale"; -import { _divergingScale } from "./js/initialDivergingScale"; -import { _qualitativeScale } from "./js/initialQualitativeScale"; - -import { throttle } from "./js/utils"; -import { - openPanelTab, - openTab, - openAppTab, - openScaleTab, - openSideNavItem, -} from "./js/tabs"; - -import { colorScaleDiverging } from "./js/colorScaleDiverging"; -import { colorScaleSequential } from "./js/colorScaleSequential"; -import { colorScaleQualitative } from "./js/colorScaleQualitative"; - -import toggleTooltip from "./js/tooltip"; -import { create3dModel } from "./js/create3dModel"; -import { createSVGswatches, downloadSwatches } from "./js/createSVGswatches"; -import { createXML, downloadXML } from "./js/createXML"; - -const chroma = require("chroma-js"); -const { extendChroma } = require("./js/chroma-plus"); +import {_sequentialScale} from './js/initialSequentialScale'; +import {_divergingScale} from './js/initialDivergingScale'; +import {_qualitativeScale} from './js/initialQualitativeScale'; + +import {throttle} from './js/utils'; +import {openPanelTab, openTab, openAppTab, openScaleTab, openSideNavItem} from './js/tabs'; + +import {colorScaleDiverging} from './js/colorScaleDiverging'; +import {colorScaleSequential} from './js/colorScaleSequential'; +import {colorScaleQualitative} from './js/colorScaleQualitative'; + +import toggleTooltip from './js/tooltip'; +import {create3dModel} from './js/create3dModel'; +import {createSVGswatches, downloadSwatches} from './js/createSVGswatches'; +import {createXML, downloadXML} from './js/createXML'; + +const chroma = require('chroma-js'); +const {extendChroma} = require('./js/chroma-plus'); extendChroma(chroma); -window - .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", (event) => { - if (event.matches) { - //dark mode - document.querySelector("body").classList.remove("spectrum--light"); - document.querySelector("body").classList.add("spectrum--darkest"); - } else { - //light mode - document.querySelector("body").classList.add("spectrum--light"); - document.querySelector("body").classList.remove("spectrum--darkest"); - } - }); -const mq = window.matchMedia("(prefers-color-scheme: dark)"); +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { + if (event.matches) { + //dark mode + document.querySelector('body').classList.remove('spectrum--light'); + document.querySelector('body').classList.add('spectrum--darkest'); + } else { + //light mode + document.querySelector('body').classList.add('spectrum--light'); + document.querySelector('body').classList.remove('spectrum--darkest'); + } +}); +const mq = window.matchMedia('(prefers-color-scheme: dark)'); if (mq.matches) { //dark mode - document.querySelector("body").classList.add("spectrum--darkest"); + document.querySelector('body').classList.add('spectrum--darkest'); } else { //light mode - document.querySelector("body").classList.add("spectrum--light"); + document.querySelector('body').classList.add('spectrum--light'); } -document.getElementById("tabSequential").click(); +document.getElementById('tabSequential').click(); // Open default tab of "charts" for each color scale tab -document.getElementById("tabsequentialDemo").click(); -document.getElementById("tabdivergingDemo").click(); -document.getElementById("tabqualitativeDemo").click(); +document.getElementById('tabsequentialDemo').click(); +document.getElementById('tabdivergingDemo').click(); +document.getElementById('tabqualitativeDemo').click(); -document.getElementById("welcome").click(); +document.getElementById('welcome').click(); colorScaleSequential(); colorScaleDiverging(); diff --git a/docs/ui/src/scss/colorinputs.scss b/docs/ui/src/scss/colorinputs.scss index d88cf1b0..5c4b5c19 100644 --- a/docs/ui/src/scss/colorinputs.scss +++ b/docs/ui/src/scss/colorinputs.scss @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -input[type="color"] { +input[type='color'] { -webkit-appearance: none; height: 32px; width: 32px; @@ -28,75 +28,67 @@ input[type="color"] { margin-left: var(--spectrum-global-dimension-size-100); } } -input[type="color"]::-webkit-color-swatch-wrapper { +input[type='color']::-webkit-color-swatch-wrapper { padding: 0px; border: none; } -input[type="color"]::-webkit-color-swatch { +input[type='color']::-webkit-color-swatch { border: none; border-radius: 4px; } -input[type="color"]:disabled { +input[type='color']:disabled { // opacity: 0.4; border-color: var(--spectrum-global-color-gray-200); } .slider:focus, -input[type="color"]:focus { +input[type='color']:focus { outline: none; border: 1px solid var(--spectrum-alias-background-color-default); box-shadow: 0 0 0 2px var(--spectrum-alias-focus-color); } -input[type="color"]::-webkit-color-swatch { +input[type='color']::-webkit-color-swatch { border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.25); } -input[type="color"]::-moz-color-swatch { +input[type='color']::-moz-color-swatch { border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.25); } // Color Input Classes -.keyColor > input[type="color"] { +.keyColor > input[type='color'] { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.keyColor > input[type="color"]::-webkit-color-swatch { +.keyColor > input[type='color']::-webkit-color-swatch { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.keyColor > input[type="color"]::-moz-color-swatch { +.keyColor > input[type='color']::-moz-color-swatch { border-top-right-radius: 0; border-bottom-right-radius: 0; } -input[type="color"].keyColor-Item + .spectrum-ActionButton { +input[type='color'].keyColor-Item + .spectrum-ActionButton { border-top-left-radius: 0; border-bottom-left-radius: 0; } // Middle color for diverging needs full rounding -.keyColor-diverging-middle > input[type="color"] { +.keyColor-diverging-middle > input[type='color'] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } -.keyColor-diverging-middle > input[type="color"]::-webkit-color-swatch { +.keyColor-diverging-middle > input[type='color']::-webkit-color-swatch { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } -.keyColor-diverging-middle > input[type="color"]::-moz-color-swatch { +.keyColor-diverging-middle > input[type='color']::-moz-color-swatch { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .spectrum-FieldLabel--right { - padding: var( - --spectrum-fieldlabel-side-padding-top, - var(--spectrum-global-dimension-size-100) - ) - 0 0 - var( - --spectrum-fieldlabel-side-padding-x, - var(--spectrum-global-dimension-size-100) - ); + padding: var(--spectrum-fieldlabel-side-padding-top, var(--spectrum-global-dimension-size-100)) 0 0 var(--spectrum-fieldlabel-side-padding-x, var(--spectrum-global-dimension-size-100)); } diff --git a/docs/ui/src/scss/components/articleCard.scss b/docs/ui/src/scss/components/articleCard.scss index bae8c835..87ccf2d5 100644 --- a/docs/ui/src/scss/components/articleCard.scss +++ b/docs/ui/src/scss/components/articleCard.scss @@ -21,8 +21,7 @@ text-decoration: none; transition: border-color var(--spectrum-global-animation-duration-100, 130ms) ease-out, - background-color var(--spectrum-global-animation-duration-100, 130ms) - ease-out; + background-color var(--spectrum-global-animation-duration-100, 130ms) ease-out; &:hover { border-color: var(--spectrum-global-color-gray-400); @@ -35,8 +34,7 @@ } .articleCard_content { - padding: 0 var(--spectrum-global-dimension-size-300) - var(--spectrum-global-dimension-size-300); + padding: 0 var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300); } .articleCard_image { diff --git a/docs/ui/src/scss/components/colorPicker.scss b/docs/ui/src/scss/components/colorPicker.scss index 0b09e741..0003f3a1 100644 --- a/docs/ui/src/scss/components/colorPicker.scss +++ b/docs/ui/src/scss/components/colorPicker.scss @@ -8,7 +8,7 @@ z-index: 1; } -input[type="color"].colorPicker-Input { +input[type='color'].colorPicker-Input { display: none; z-index: -1; } diff --git a/docs/ui/src/scss/components/colorSlider.scss b/docs/ui/src/scss/components/colorSlider.scss index 0030a7a7..e00b0905 100644 --- a/docs/ui/src/scss/components/colorSlider.scss +++ b/docs/ui/src/scss/components/colorSlider.scss @@ -2,25 +2,15 @@ .spectrum-ColorSlider { --spectrum-colorslider-handle-hitarea-border-radius: 0%; - --spectrum-colorslider-handle-hitarea-width: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-colorslider-handle-hitarea-height: var( - --spectrum-global-dimension-size-300 - ); + --spectrum-colorslider-handle-hitarea-width: var(--spectrum-global-dimension-size-300); + --spectrum-colorslider-handle-hitarea-height: var(--spectrum-global-dimension-size-300); } .spectrum-ColorSlider { position: relative; display: block; - width: var( - --spectrum-colorslider-default-length, - var(--spectrum-global-dimension-size-2400) - ); - height: var( - --spectrum-colorslider-height, - var(--spectrum-global-dimension-size-300) - ); + width: var(--spectrum-colorslider-default-length, var(--spectrum-global-dimension-size-2400)); + height: var(--spectrum-colorslider-height, var(--spectrum-global-dimension-size-300)); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -44,13 +34,11 @@ } .spectrum-ColorSlider-checkerboard { - background-size: var(--spectrum-global-dimension-static-size-200, 16px) - var(--spectrum-global-dimension-static-size-200, 16px); + background-size: var(--spectrum-global-dimension-static-size-200, 16px) var(--spectrum-global-dimension-static-size-200, 16px); background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100, 8px), - var(--spectrum-global-dimension-static-size-100, 8px) - calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)), + var(--spectrum-global-dimension-static-size-100, 8px) calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)), calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)) 0; } @@ -58,37 +46,13 @@ .spectrum-ColorSlider-checkerboard { width: 100%; height: 100%; - border-radius: var( - --spectrum-colorslider-border-radius, - var(--spectrum-alias-border-radius-regular) - ); + border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular)); } .spectrum-ColorSlider-checkerboard { - background-color: var( - --spectrum-global-color-static-white, - rgb(255, 255, 255) - ); - background-image: linear-gradient( - -45deg, - transparent 75.5%, - var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5% - ), - linear-gradient( - 45deg, - transparent 75.5%, - var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5% - ), - linear-gradient( - -45deg, - var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, - transparent 25.5% - ), - linear-gradient( - 45deg, - var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, - transparent 25.5% - ); + background-color: var(--spectrum-global-color-static-white, rgb(255, 255, 255)); + background-image: linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%), linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%), + linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%), linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%); } .spectrum-ColorSlider-handle { @@ -97,70 +61,23 @@ } .spectrum-ColorHandle { - --spectrum-colorhandle-background-offset: calc( - -1 * var(--spectrum-global-dimension-static-size-25, 2px) - ); - --spectrum-colorhandle-checkerboard-size: var( - --spectrum-global-dimension-static-size-100, - 8px - ); - --spectrum-colorhandle-animation-duration: var( - --spectrum-global-animation-duration-100, - 130ms - ); + --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)); + --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100, 8px); + --spectrum-colorhandle-animation-duration: var(--spectrum-global-animation-duration-100, 130ms); --spectrum-colorhandle-animation-easing: ease-in-out; - --spectrum-colorhandle-hitarea-size: var( - --spectrum-global-dimension-size-300 - ); + --spectrum-colorhandle-hitarea-size: var(--spectrum-global-dimension-size-300); } .spectrum-ColorHandle { - border-color: var( - --spectrum-colorhandle-inner-border-color, - var(--spectrum-global-color-static-white) - ); - box-shadow: 0 0 0 - var( - --spectrum-colorhandle-outer-border-size, - var(--spectrum-global-dimension-static-size-10) - ) - var( - --spectrum-colorhandle-outer-border-color, - var(--spectrum-alias-colorhandle-outer-border-color) - ); - background-color: var( - --spectrum-global-color-static-white, - rgb(255, 255, 255) - ); - background-image: linear-gradient( - -45deg, - transparent 75.5%, - var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5% - ), - linear-gradient( - 45deg, - transparent 75.5%, - var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5% - ), - linear-gradient( - -45deg, - var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, - transparent 25.5% - ), - linear-gradient( - 45deg, - var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, - transparent 25.5% - ); + border-color: var(--spectrum-colorhandle-inner-border-color, var(--spectrum-global-color-static-white)); + box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) var(--spectrum-colorhandle-outer-border-color, var(--spectrum-alias-colorhandle-outer-border-color)); + background-color: var(--spectrum-global-color-static-white, rgb(255, 255, 255)); + background-image: linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%), linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%), + linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%), linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%); } .spectrum-ColorHandle { - --spectrum-colorhandle-background-offset: calc( - -1 * var(--spectrum-global-dimension-static-size-25, 2px) - ); - --spectrum-colorhandle-checkerboard-size: var( - --spectrum-global-dimension-static-size-100, - 8px - ); + --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25, 2px)); + --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100, 8px); --spectrum-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42); } @@ -169,15 +86,7 @@ border-radius: 100%; } .spectrum-ColorHandle-color { - box-shadow: inset 0 0 0 - var( - --spectrum-colorhandle-outer-border-size, - var(--spectrum-global-dimension-static-size-10) - ) - var( - --spectrum-colorhandle-outer-border-color, - var(--spectrum-alias-colorhandle-outer-border-color) - ); + box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size, var(--spectrum-global-dimension-static-size-10)) var(--spectrum-colorhandle-outer-border-color, var(--spectrum-alias-colorhandle-outer-border-color)); } .spectrum-ColorHandle-color { border-radius: 100%; @@ -190,73 +99,31 @@ position: absolute; z-index: 1; box-sizing: border-box; - width: var( - --spectrum-colorhandle-size, - var(--spectrum-global-dimension-size-200) - ); - height: var( - --spectrum-colorhandle-size, - var(--spectrum-global-dimension-size-200) - ); - margin-left: calc( - -1 * var( - --spectrum-colorhandle-size, - var(--spectrum-global-dimension-size-200) - ) / 2 - ); - margin-top: calc( - -1 * var( - --spectrum-colorhandle-size, - var(--spectrum-global-dimension-size-200) - ) / 2 - ); - border-width: var( - --spectrum-colorhandle-inner-border-size, - var(--spectrum-global-dimension-static-size-25) - ); + width: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)); + height: var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)); + margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2); + margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) / 2); + border-width: var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)); border-style: solid; - background-size: var(--spectrum-global-dimension-static-size-200, 16px) - var(--spectrum-global-dimension-static-size-200, 16px); + background-size: var(--spectrum-global-dimension-static-size-200, 16px) var(--spectrum-global-dimension-static-size-200, 16px); background-position: - var(--spectrum-colorhandle-background-offset) - var(--spectrum-colorhandle-background-offset), - var(--spectrum-colorhandle-background-offset) - calc( - var(--spectrum-colorhandle-checkerboard-size) + - var(--spectrum-colorhandle-background-offset) - ), - calc( - var(--spectrum-colorhandle-checkerboard-size) + - var(--spectrum-colorhandle-background-offset) - ) - calc( - -1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset) - ), - calc( - -1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset) - ) - var(--spectrum-colorhandle-background-offset); + var(--spectrum-colorhandle-background-offset) var(--spectrum-colorhandle-background-offset), + var(--spectrum-colorhandle-background-offset) calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)), + calc(var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)), + calc(-1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset)) var(--spectrum-colorhandle-background-offset); transition: - width var(--spectrum-colorhandle-animation-duration) - var(--spectrum-colorhandle-animation-easing), - height var(--spectrum-colorhandle-animation-duration) - var(--spectrum-colorhandle-animation-easing), - border-width var(--spectrum-colorhandle-animation-duration) - var(--spectrum-colorhandle-animation-easing), - margin-left var(--spectrum-colorhandle-animation-duration) - var(--spectrum-colorhandle-animation-easing), - margin-top var(--spectrum-colorhandle-animation-duration) - var(--spectrum-colorhandle-animation-easing); + width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), + height var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), + border-width var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), + margin-left var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing), + margin-top var(--spectrum-colorhandle-animation-duration) var(--spectrum-colorhandle-animation-easing); } .spectrum-ColorSlider-gradient, .spectrum-ColorSlider-checkerboard { width: 100%; height: 100%; - border-radius: var( - --spectrum-colorslider-border-radius, - var(--spectrum-alias-border-radius-regular) - ); + border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular)); } #alphaSlider { diff --git a/docs/ui/src/scss/components/dialog.scss b/docs/ui/src/scss/components/dialog.scss index 60cecb3a..c44f3808 100644 --- a/docs/ui/src/scss/components/dialog.scss +++ b/docs/ui/src/scss/components/dialog.scss @@ -1,46 +1,18 @@ // // Manually replacing this code .spectrum-Dialog { - background: var( - --spectrum-dialog-background-color, - var(--spectrum-alias-background-color-default) - ); + background: var(--spectrum-dialog-background-color, var(--spectrum-alias-background-color-default)); } .spectrum-Dialog { position: fixed; left: 50%; top: 50%; - transform: translateX(-50%) translateY(-50%) - translateY( - var( - --spectrum-dialog-entry-animation-distance, - var(--spectrum-global-dimension-size-250) - ) - ); + transform: translateX(-50%) translateY(-50%) translateY(var(--spectrum-dialog-entry-animation-distance, var(--spectrum-global-dimension-size-250))); z-index: 20; border-radius: var(--spectrum-dialog-border-radius, 4px); transition: - opacity - var( - --spectrum-dialog-exit-animation-duration, - var(--spectrum-global-animation-duration-100) - ) - var(--spectrum-global-animation-ease-in, cubic-bezier(0.5, 0, 1, 1)) 0ms, - visibility 0ms linear - calc( - 0ms + - var( - --spectrum-dialog-exit-animation-duration, - var(--spectrum-global-animation-duration-100) - ) - ), - transform 0ms linear - calc( - 0ms + - var( - --spectrum-dialog-exit-animation-duration, - var(--spectrum-global-animation-duration-100) - ) - ); + opacity var(--spectrum-dialog-exit-animation-duration, var(--spectrum-global-animation-duration-100)) var(--spectrum-global-animation-ease-in, cubic-bezier(0.5, 0, 1, 1)) 0ms, + visibility 0ms linear calc(0ms + var(--spectrum-dialog-exit-animation-duration, var(--spectrum-global-animation-duration-100))), + transform 0ms linear calc(0ms + var(--spectrum-dialog-exit-animation-duration, var(--spectrum-global-animation-duration-100))); } .spectrum-Dialog { visibility: hidden; @@ -53,26 +25,10 @@ } .spectrum-Dialog.is-open { transition: - transform - var( - --spectrum-dialog-entry-animation-duration, - var(--spectrum-global-animation-duration-500) - ) - var(--spectrum-global-animation-ease-out, cubic-bezier(0, 0, 0.4, 1)) - var( - --spectrum-dialog-entry-animation-delay, - var(--spectrum-global-animation-duration-200) - ), - opacity - var( - --spectrum-dialog-entry-animation-duration, - var(--spectrum-global-animation-duration-500) - ) - var(--spectrum-global-animation-ease-out, cubic-bezier(0, 0, 0.4, 1)) - var( - --spectrum-dialog-entry-animation-delay, - var(--spectrum-global-animation-duration-200) - ); + transform var(--spectrum-dialog-entry-animation-duration, var(--spectrum-global-animation-duration-500)) var(--spectrum-global-animation-ease-out, cubic-bezier(0, 0, 0.4, 1)) + var(--spectrum-dialog-entry-animation-delay, var(--spectrum-global-animation-duration-200)), + opacity var(--spectrum-dialog-entry-animation-duration, var(--spectrum-global-animation-duration-500)) var(--spectrum-global-animation-ease-out, cubic-bezier(0, 0, 0.4, 1)) + var(--spectrum-dialog-entry-animation-delay, var(--spectrum-global-animation-duration-200)); transform: translate(-50%, calc(-50% + -2vh)); } diff --git a/docs/ui/src/scss/components/header.scss b/docs/ui/src/scss/components/header.scss index 93f9cdc8..e8fa24e8 100644 --- a/docs/ui/src/scss/components/header.scss +++ b/docs/ui/src/scss/components/header.scss @@ -6,8 +6,7 @@ border-bottom: 2px solid var(--panelBorder); background-color: var(--headerBackground); margin: 0; - padding: var(--spectrum-global-dimension-size-150) - var(--spectrum-global-dimension-size-200); + padding: var(--spectrum-global-dimension-size-150) var(--spectrum-global-dimension-size-200); align-items: center; justify-content: space-between; diff --git a/docs/ui/src/scss/components/outputSwatches.scss b/docs/ui/src/scss/components/outputSwatches.scss index 142401cb..a14170be 100644 --- a/docs/ui/src/scss/components/outputSwatches.scss +++ b/docs/ui/src/scss/components/outputSwatches.scss @@ -217,7 +217,7 @@ } .swatch--large, -input[type="color"].swatch--large { +input[type='color'].swatch--large { margin-top: var(--spectrum-global-dimension-size-100); height: 164px; width: 164px; @@ -225,7 +225,7 @@ input[type="color"].swatch--large { border: 1px solid var(--translucentLightBorder); } -input[type="color"].swatch--large { +input[type='color'].swatch--large { opacity: 0; position: absolute; top: 0; diff --git a/docs/ui/src/scss/components/sections.scss b/docs/ui/src/scss/components/sections.scss index c0f5436d..3780fd99 100644 --- a/docs/ui/src/scss/components/sections.scss +++ b/docs/ui/src/scss/components/sections.scss @@ -13,7 +13,7 @@ section { grid-template-rows: auto; grid-template-columns: 50% 50%; grid-column-gap: var(--spectrum-global-dimension-size-200); - grid-template-areas: "sectionLeft sectionRight"; + grid-template-areas: 'sectionLeft sectionRight'; } .section--left, diff --git a/docs/ui/src/scss/components/selectBox.scss b/docs/ui/src/scss/components/selectBox.scss index 90d3f25c..6bbd1221 100644 --- a/docs/ui/src/scss/components/selectBox.scss +++ b/docs/ui/src/scss/components/selectBox.scss @@ -11,9 +11,7 @@ flex-direction: column; align-items: center; justify-content: space-between; - padding: var(--spectrum-global-dimension-size-400) - var(--spectrum-global-dimension-size-300) - var(--spectrum-global-dimension-size-300); + padding: var(--spectrum-global-dimension-size-400) var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300); border-radius: var(--spectrum-alias-border-radius-medium); border-width: 1px; border-style: solid; @@ -24,8 +22,7 @@ text-decoration: none; transition: border-color var(--spectrum-global-animation-duration-100, 130ms) ease-out, - background-color var(--spectrum-global-animation-duration-100, 130ms) - ease-out; + background-color var(--spectrum-global-animation-duration-100, 130ms) ease-out; &:hover { border-color: var(--spectrum-global-color-gray-400); diff --git a/docs/ui/src/scss/components/textfield.scss b/docs/ui/src/scss/components/textfield.scss index bdad7623..66b813ef 100644 --- a/docs/ui/src/scss/components/textfield.scss +++ b/docs/ui/src/scss/components/textfield.scss @@ -3,9 +3,6 @@ .spectrum-Textfield-input { border-color: transparent; - font-weight: var( - --spectrum-heading-m-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) - ); + font-weight: var(--spectrum-heading-m-text-font-weight, var(--spectrum-alias-heading-text-font-weight-regular)); } } diff --git a/docs/ui/src/scss/converter.scss b/docs/ui/src/scss/converter.scss index 2a0c6ad5..e6afe5ab 100644 --- a/docs/ui/src/scss/converter.scss +++ b/docs/ui/src/scss/converter.scss @@ -3,19 +3,19 @@ padding: 0; height: 100vh; overflow: hidden; - font-family: "Adobe Clean"; // local update since no typekit support currently. + font-family: 'Adobe Clean'; // local update since no typekit support currently. display: grid; grid-template-columns: auto; grid-template-rows: var(--header-height) auto; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: - "header" - "main"; + 'header' + 'main'; } #output { - font-family: "Source Code Pro", monospace; + font-family: 'Source Code Pro', monospace; margin-top: 16px; padding: 0 4px; color: #000000; @@ -53,7 +53,7 @@ max-width: 60ch; } -#converterGroup input[type="text"] + input[type="color"] { +#converterGroup input[type='text'] + input[type='color'] { margin-left: 6px; } diff --git a/docs/ui/src/scss/style.scss b/docs/ui/src/scss/style.scss index 0763011a..37bbd325 100644 --- a/docs/ui/src/scss/style.scss +++ b/docs/ui/src/scss/style.scss @@ -16,9 +16,7 @@ governing permissions and limitations under the License. --gradient-height: calc(100vh - var(--gradient-height-offset)); --colors-height: var(--gradient-height); --color-size: 32px; - --colors-wrapper-height: calc( - 100vh - var(--gradient-height-offset) - var(--color-size) - ); + --colors-wrapper-height: calc(100vh - var(--gradient-height-offset) - var(--color-size)); --gradient-slider-height: var(--gradient-height); --slider-thumb-size: 8px; // 24px --header-height: 58px; @@ -35,49 +33,23 @@ governing permissions and limitations under the License. --spectrum-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); --spectrum-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-fieldlabel-text-size: var( - --spectrum-global-dimension-font-size-75, - 12px - ); + --spectrum-fieldlabel-text-size: var(--spectrum-global-dimension-font-size-75, 12px); --spectrum-fieldlabel-text-font-weight: 400; --spectrum-fieldlabel-text-line-height: 1.3; --spectrum-global-font-weight-bold: 600; - --spectrum-alias-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-heading-m-text-font-weight: var( - --spectrum-alias-heading-text-font-weight-regular - ); - --spectrum-heading-l-text-font-weight: var( - --spectrum-alias-heading-text-font-weight-regular - ); - --spectrum-heading-xl-text-font-weight: var( - --spectrum-alias-heading-text-font-weight-regular - ); - --spectrum-heading-xxl-text-font-weight: var( - --spectrum-alias-heading-text-font-weight-regular - ); - --spectrum-body-s-strong-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-body-m-strong-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-body-l-strong-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-body-xl-strong-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-button-primary-texticon-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - - --spectrum-alias-focus-color: var( - --spectrum-alias-focus-ring-color, - var(--spectrum-global-color-blue-400) - ); + --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-heading-m-text-font-weight: var(--spectrum-alias-heading-text-font-weight-regular); + --spectrum-heading-l-text-font-weight: var(--spectrum-alias-heading-text-font-weight-regular); + --spectrum-heading-xl-text-font-weight: var(--spectrum-alias-heading-text-font-weight-regular); + --spectrum-heading-xxl-text-font-weight: var(--spectrum-alias-heading-text-font-weight-regular); + --spectrum-body-s-strong-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-body-m-strong-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-body-l-strong-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-body-xl-strong-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-button-primary-texticon-text-font-weight: var(--spectrum-global-font-weight-bold); + + --spectrum-alias-focus-color: var(--spectrum-alias-focus-ring-color, var(--spectrum-global-color-blue-400)); // defaults --headerBackground: var(--spectrum-global-color-gray-50); --panelBackground: var(--spectrum-global-color-gray-75); @@ -133,7 +105,7 @@ body, } .spectrum-Code { - font-family: Menlo, Monaco, "Courier New", monospace; + font-family: Menlo, Monaco, 'Courier New', monospace; } .appFrame { @@ -147,8 +119,8 @@ body, grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: - "header" - "default"; + 'header' + 'default'; } .appFramePanels { margin: 0; @@ -160,7 +132,7 @@ body, grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; - grid-template-areas: "leftPanel main rightPanel"; + grid-template-areas: 'leftPanel main rightPanel'; } .appFramePanel { @@ -173,7 +145,7 @@ body, grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; - grid-template-areas: "main"; + grid-template-areas: 'main'; } .appFramePanelLeft { @@ -186,7 +158,7 @@ body, grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; - grid-template-areas: "leftPanel main"; + grid-template-areas: 'leftPanel main'; } .appFramePanelLeft--large { @@ -203,7 +175,7 @@ body, grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; - grid-template-areas: "main rightPanel"; + grid-template-areas: 'main rightPanel'; } .appFramePanelRight--large { @@ -217,13 +189,13 @@ body, grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: - "main" - "rightPanel"; + 'main' + 'rightPanel'; @media screen and (min-width: 1065px) { grid-template-columns: 50% 50%; grid-template-rows: auto; - grid-template-areas: "main rightPanel"; + grid-template-areas: 'main rightPanel'; } } @@ -237,7 +209,7 @@ body, grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; - grid-template-areas: "leftPanel main"; + grid-template-areas: 'leftPanel main'; } /* Tabs aren't inheriting all styles properly. Remapping here */ @@ -246,10 +218,7 @@ body, padding: 0; } .spectrum-Tabs-item { - color: var( - --spectrum-tabs-text-color, - var(--spectrum-alias-label-text-color) - ); + color: var(--spectrum-tabs-text-color, var(--spectrum-alias-label-text-color)); a.spectrum-Tabs-itemLabel { color: inherit; @@ -265,15 +234,8 @@ body, } } .spectrum-Tabs-item.is-selected { - color: var( - --spectrum-tabs-text-color-selected, - var(--spectrum-alias-heading-text-color) - ); - border-bottom: 2px solid - var( - --spectrum-tabs-selection-indicator-color, - var(--spectrum-global-color-gray-900) - ); + color: var(--spectrum-tabs-text-color-selected, var(--spectrum-alias-heading-text-color)); + border-bottom: 2px solid var(--spectrum-tabs-selection-indicator-color, var(--spectrum-global-color-gray-900)); } .spectrum-Tabs-selectionIndicator { display: none; /* simplifying design to speed up development */ @@ -541,21 +503,21 @@ body, } .spectrum-Slider { - input[type="range"] { + input[type='range'] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ } - input[type="range"]::-webkit-slider-thumb { + input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; } - input[type="range"]:focus { + input[type='range']:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ } - input[type="range"]::-ms-track { + input[type='range']::-ms-track { width: 100%; cursor: pointer; @@ -570,137 +532,76 @@ body, width: 16px; height: 16px; background-color: var(--spectrum-global-color-gray-100); - margin: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / -2 - ) - 0 0 - calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / -2 - ); - border-width: var( - --spectrum-slider-handle-border-size, - var(--spectrum-alias-border-size-thick) - ); + margin: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2) 0 0 calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2); + border-width: var(--spectrum-slider-handle-border-size, var(--spectrum-alias-border-size-thick)); border-style: solid; - border-color: var( - --spectrum-slider-m-handle-border-color, - var(--spectrum-global-color-gray-700) - ); - border-radius: var( - --spectrum-slider-handle-border-radius, - var(--spectrum-alias-border-radius-medium) - ); - transition: border-width - var( - --spectrum-slider-animation-duration, - var(--spectrum-global-animation-duration-100) - ) - ease-in-out; + border-color: var(--spectrum-slider-m-handle-border-color, var(--spectrum-global-color-gray-700)); + border-radius: var(--spectrum-slider-handle-border-radius, var(--spectrum-alias-border-radius-medium)); + transition: border-width var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out; outline: none; cursor: grab; } @mixin thumbFocus { - background-color: var( - --spectrum-alias-focus-color, - var(--spectrum-alias-focus-color) - ); - border-color: var( - --spectrum-alias-focus-color, - var(--spectrum-alias-focus-color) - ); - transition: background-color - var( - --spectrum-slider-animation-duration, - var(--spectrum-global-animation-duration-100) - ) - ease-in-out; - } - - input[type="range"]::-webkit-slider-thumb { + background-color: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); + border-color: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); + transition: background-color var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out; + } + + input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; @include thumb; margin-top: -8px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ } - input[type="range"]:focus::-webkit-slider-thumb { + input[type='range']:focus::-webkit-slider-thumb { @include thumbFocus; } /* All the same stuff for Firefox */ - input[type="range"]::-moz-range-thumb { + input[type='range']::-moz-range-thumb { @include thumb; } - input[type="range"]:focus::-moz-range-thumb { + input[type='range']:focus::-moz-range-thumb { @include thumbFocus; } /* All the same stuff for IE */ - input[type="range"]::-ms-thumb { + input[type='range']::-ms-thumb { @include thumb; } - input[type="range"]:focus::-ms-thumb { + input[type='range']:focus::-ms-thumb { @include thumbFocus; } /* TRACK */ @mixin track { width: 100%; - height: var( - --spectrum-slider-track-height, - var(--spectrum-alias-border-size-thick) - ); + height: var(--spectrum-slider-track-height, var(--spectrum-alias-border-size-thick)); box-sizing: border-box; z-index: 1; background-color: var(--spectrum-global-color-gray-300); - top: calc( - var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) / - 2 - ); - margin-top: calc( - var( - --spectrum-slider-fill-track-height, - var(--spectrum-alias-border-size-thick) - ) / -2 - ); + top: calc(var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) / 2); + margin-top: calc(var(--spectrum-slider-fill-track-height, var(--spectrum-alias-border-size-thick)) / -2); pointer-events: none; - padding: 0 - var( - --spectrum-slider-handle-gap, - var(--spectrum-alias-border-size-thicker) - ) - 0 0; - margin-left: calc( - var( - --spectrum-slider-handle-width, - var(--spectrum-global-dimension-size-200) - ) / 2 * -1 - ); - } - - input[type="range"]::-webkit-slider-runnable-track { + padding: 0 var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)) 0 0; + margin-left: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2 * -1); + } + + input[type='range']::-webkit-slider-runnable-track { @include track; } - input[type="range"]:focus::-webkit-slider-runnable-track { - background: var( - --spectrum-alias-focus-color, - var(--spectrum-alias-focus-color) - ); + input[type='range']:focus::-webkit-slider-runnable-track { + background: var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); } - input[type="range"]::-moz-range-track { + input[type='range']::-moz-range-track { @include track; } - input[type="range"]::-ms-track { + input[type='range']::-ms-track { @include track; background: transparent; @@ -708,23 +609,17 @@ body, border-width: 2px 0; color: transparent; } - input[type="range"]::-ms-fill-lower { + input[type='range']::-ms-fill-lower { background-color: var(--spectrum-global-color-gray-300); } - input[type="range"]:focus::-ms-fill-lower { - background-color: var( - --spectrum-alias-focus-ring-color, - var(--spectrum-global-color-blue-400) - ); + input[type='range']:focus::-ms-fill-lower { + background-color: var(--spectrum-alias-focus-ring-color, var(--spectrum-global-color-blue-400)); } - input[type="range"]::-ms-fill-upper { + input[type='range']::-ms-fill-upper { background-color: var(--spectrum-global-color-gray-300); } - input[type="range"]:focus::-ms-fill-upper { - background-color: var( - --spectrum-alias-focus-ring-color, - var(--spectrum-global-color-blue-400) - ); + input[type='range']:focus::-ms-fill-upper { + background-color: var(--spectrum-alias-focus-ring-color, var(--spectrum-global-color-blue-400)); } } @@ -895,7 +790,7 @@ p { min-width: 40px; margin-bottom: 8px; - input[type="color"] { + input[type='color'] { margin-right: 8px; } textarea { @@ -946,8 +841,7 @@ p { a:focus { outline: none; - box-shadow: 0 0 0 2px - var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); + box-shadow: 0 0 0 2px var(--spectrum-alias-focus-color, var(--spectrum-alias-focus-color)); border-radius: var(--spectrum-alias-border-radius-regular); } @@ -1204,8 +1098,8 @@ a:focus { grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: - "themeConfig" - "themeDefault"; + 'themeConfig' + 'themeDefault'; background-color: var(--panelBackground); } @@ -1303,7 +1197,7 @@ a:focus { width: 150px; } -[dir="ltr"] .spectrum-Picker { +[dir='ltr'] .spectrum-Picker { padding: 0 8px; height: 32px; border-width: 1px; @@ -1314,12 +1208,7 @@ a:focus { position: absolute; right: var(--spectrum-global-dimension-size-150); top: 4px; - margin-top: calc( - var( - --spectrum-icon-chevron-down-medium-height, - var(--spectrum-global-dimension-size-75) - ) / -2 - ); + margin-top: calc(var(--spectrum-icon-chevron-down-medium-height, var(--spectrum-global-dimension-size-75)) / -2); } .themeColor_item ~ .themeColor_item { @@ -1533,22 +1422,13 @@ a:focus { // Missing slider CSS for disabled state .spectrum-Slider-controls:disabled { &::-webkit-slider-thumb { - border-color: var( - --spectrum-slider-handle-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); + border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400)); } &::-moz-range-thumb { - border-color: var( - --spectrum-slider-handle-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); + border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400)); } &::-ms-thumb { - border-color: var( - --spectrum-slider-handle-border-color-disabled, - var(--spectrum-global-color-gray-400) - ); + border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400)); } } @@ -1616,7 +1496,7 @@ a:focus { display: grid; grid-template-columns: 90px 70px 58px 32px; column-gap: 8px; - grid-template-areas: "ratio luminosity status actions"; + grid-template-areas: 'ratio luminosity status actions'; .spectrum-Textfield { width: 100%; @@ -1983,7 +1863,7 @@ a:focus { grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; - grid-template-areas: "main aside"; + grid-template-areas: 'main aside'; position: relative; } diff --git a/docs/ui/src/theme.html b/docs/ui/src/theme.html index 5d06a940..dce6683f 100644 --- a/docs/ui/src/theme.html +++ b/docs/ui/src/theme.html @@ -4,9 +4,7 @@
-
+
diff --git a/docs/ui/src/theme.js b/docs/ui/src/theme.js index 57cc2696..dd2168ae 100644 --- a/docs/ui/src/theme.js +++ b/docs/ui/src/theme.js @@ -10,124 +10,110 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import "@spectrum-css/vars/dist/spectrum-global.css"; -import "@spectrum-css/vars/dist/spectrum-medium.css"; -import "@spectrum-css/vars/dist/spectrum-light.css"; -import "@spectrum-css/vars/dist/spectrum-darkest.css"; - -import "@spectrum-css/page/dist/index-vars.css"; -import "@spectrum-css/icon/dist/index-vars.css"; -import "@spectrum-css/link/dist/index-vars.css"; -import "@spectrum-css/alert/dist/index-vars.css"; -import "@spectrum-css/radio/dist/index-vars.css"; -import "@spectrum-css/sidenav/dist/index-vars.css"; -import "@spectrum-css/dialog/dist/index-vars.css"; -import "@spectrum-css/button/dist/index-vars.css"; -import "@spectrum-css/badge/dist/index-vars.css"; -import "@spectrum-css/actionbutton/dist/index-vars.css"; -import "@spectrum-css/actiongroup/dist/index-vars.css"; -import "@spectrum-css/divider/dist/index-vars.css"; -import "@spectrum-css/fieldgroup/dist/index-vars.css"; -import "@spectrum-css/textfield/dist/index-vars.css"; -import "@spectrum-css/popover/dist/index-vars.css"; -import "@spectrum-css/picker/dist/index-vars.css"; -import "@spectrum-css/fieldlabel/dist/index-vars.css"; -import "@spectrum-css/checkbox/dist/index-vars.css"; -import "@spectrum-css/switch/dist/index-vars.css"; -import "@spectrum-css/buttongroup/dist/index-vars.css"; -import "@spectrum-css/tooltip/dist/index-vars.css"; -import "@spectrum-css/slider/dist/index-vars.css"; -import "@spectrum-css/tabs/dist/index-vars.css"; -import "@spectrum-css/table/dist/index-vars.css"; -import "@spectrum-css/toast/dist/index-vars.css"; -import "@spectrum-css/illustratedmessage/dist/index-vars.css"; -import "@spectrum-css/typography/dist/index-vars.css"; -import "@spectrum-css/progresscircle/dist/index-vars.css"; - -import "./scss/colorinputs.scss"; -import "./scss/charts.scss"; -import "./scss/style.scss"; -import "./scss/components/articleCard.scss"; -import "./scss/components/colorPicker.scss"; -import "./scss/components/colorSlider.scss"; -import "./scss/components/dialog.scss"; -import "./scss/components/header.scss"; -import "./scss/components/highlightCode.scss"; -import "./scss/components/imageUploader.scss"; -import "./scss/components/outputSwatches.scss"; -import "./scss/components/panelAccordion.scss"; -import "./scss/components/popover.scss"; -import "./scss/components/sections.scss"; -import "./scss/components/selectBox.scss"; -import "./scss/components/statusLabel.scss"; -import "./scss/components/textfield.scss"; -import "./scss/components/toast.scss"; -import "./scss/components/tooltip.scss"; - -import "@adobe/focus-ring-polyfill"; - -import loadIcons from "loadicons"; -loadIcons("./spectrum-css-icons.svg"); -loadIcons("./spectrum-icons.svg"); - -import ClipboardJS from "clipboard"; +import '@spectrum-css/vars/dist/spectrum-global.css'; +import '@spectrum-css/vars/dist/spectrum-medium.css'; +import '@spectrum-css/vars/dist/spectrum-light.css'; +import '@spectrum-css/vars/dist/spectrum-darkest.css'; + +import '@spectrum-css/page/dist/index-vars.css'; +import '@spectrum-css/icon/dist/index-vars.css'; +import '@spectrum-css/link/dist/index-vars.css'; +import '@spectrum-css/alert/dist/index-vars.css'; +import '@spectrum-css/radio/dist/index-vars.css'; +import '@spectrum-css/sidenav/dist/index-vars.css'; +import '@spectrum-css/dialog/dist/index-vars.css'; +import '@spectrum-css/button/dist/index-vars.css'; +import '@spectrum-css/badge/dist/index-vars.css'; +import '@spectrum-css/actionbutton/dist/index-vars.css'; +import '@spectrum-css/actiongroup/dist/index-vars.css'; +import '@spectrum-css/divider/dist/index-vars.css'; +import '@spectrum-css/fieldgroup/dist/index-vars.css'; +import '@spectrum-css/textfield/dist/index-vars.css'; +import '@spectrum-css/popover/dist/index-vars.css'; +import '@spectrum-css/picker/dist/index-vars.css'; +import '@spectrum-css/fieldlabel/dist/index-vars.css'; +import '@spectrum-css/checkbox/dist/index-vars.css'; +import '@spectrum-css/switch/dist/index-vars.css'; +import '@spectrum-css/buttongroup/dist/index-vars.css'; +import '@spectrum-css/tooltip/dist/index-vars.css'; +import '@spectrum-css/slider/dist/index-vars.css'; +import '@spectrum-css/tabs/dist/index-vars.css'; +import '@spectrum-css/table/dist/index-vars.css'; +import '@spectrum-css/toast/dist/index-vars.css'; +import '@spectrum-css/illustratedmessage/dist/index-vars.css'; +import '@spectrum-css/typography/dist/index-vars.css'; +import '@spectrum-css/progresscircle/dist/index-vars.css'; + +import './scss/colorinputs.scss'; +import './scss/charts.scss'; +import './scss/style.scss'; +import './scss/components/articleCard.scss'; +import './scss/components/colorPicker.scss'; +import './scss/components/colorSlider.scss'; +import './scss/components/dialog.scss'; +import './scss/components/header.scss'; +import './scss/components/highlightCode.scss'; +import './scss/components/imageUploader.scss'; +import './scss/components/outputSwatches.scss'; +import './scss/components/panelAccordion.scss'; +import './scss/components/popover.scss'; +import './scss/components/sections.scss'; +import './scss/components/selectBox.scss'; +import './scss/components/statusLabel.scss'; +import './scss/components/textfield.scss'; +import './scss/components/toast.scss'; +import './scss/components/tooltip.scss'; + +import '@adobe/focus-ring-polyfill'; + +import loadIcons from 'loadicons'; +loadIcons('./spectrum-css-icons.svg'); +loadIcons('./spectrum-icons.svg'); + +import ClipboardJS from 'clipboard'; // Import local Javascript functions -import { _theme } from "./js/initialTheme"; -import { paramSetup } from "./js/params"; -import { throttle } from "./js/utils"; -import { - getThemeContrastRatios, - getContrastRatioInputs, -} from "./js/getThemeData"; -import { addColorScale, addColorScaleUpdate } from "./js/colorScale"; -import { addColorsFromImage } from "./js/addColorsFromImage"; -import { themeUpdate, themeUpdateParams } from "./js/themeUpdate"; -import { sliderValue, sliderInput } from "./js/sliderInput"; -import { updateColorWheel } from "./js/colorWheel"; -import { addBulk, bulkItemColorInput, cancelBulk } from "./js/addBulkDialog"; -import { - addLightnessBulk, - bulkLightnessInput, - cancelLightnessBulk, -} from "./js/addLightnessBulkDialog"; -import { clearAllColors } from "./js/keyColors"; -import { showToast, hideToast, exitPreview, neverShowToast } from "./js/toast"; -import { addFromURL, addFromURLDialog, cancelURL } from "./js/addFromURL"; -import updateThemeTitle from "./js/themeTitle"; -import { addRatio, sortRatios } from "./js/ratios"; -import { - openPanelTab, - openTab, - openDetailTab, - openAppTab, - openSideNavItem, - openColorTab, -} from "./js/tabs"; -import toggleTooltip from "./js/tooltip"; -import { downloadUiKit, createSVGuiKit } from "./js/createSVGuiKit"; -import { toggleSwatchAttributes } from "./js/toggleSwatchAttributes"; -import { pageLoader } from "./js/pageLoader"; -import { format } from "path"; -import { create3dModel } from "./js/create3dModel"; -import { sortColorScales } from "./js/sortColorScales"; -import { togglePopover } from "./js/popover"; -import { forceSimulation } from "d3"; - -const { readFileSync } = require("fs"); -const posthtml = require("posthtml"); +import {_theme} from './js/initialTheme'; +import {paramSetup} from './js/params'; +import {throttle} from './js/utils'; +import {getThemeContrastRatios, getContrastRatioInputs} from './js/getThemeData'; +import {addColorScale, addColorScaleUpdate} from './js/colorScale'; +import {addColorsFromImage} from './js/addColorsFromImage'; +import {themeUpdate, themeUpdateParams} from './js/themeUpdate'; +import {sliderValue, sliderInput} from './js/sliderInput'; +import {updateColorWheel} from './js/colorWheel'; +import {addBulk, bulkItemColorInput, cancelBulk} from './js/addBulkDialog'; +import {addLightnessBulk, bulkLightnessInput, cancelLightnessBulk} from './js/addLightnessBulkDialog'; +import {clearAllColors} from './js/keyColors'; +import {showToast, hideToast, exitPreview, neverShowToast} from './js/toast'; +import {addFromURL, addFromURLDialog, cancelURL} from './js/addFromURL'; +import updateThemeTitle from './js/themeTitle'; +import {addRatio, sortRatios} from './js/ratios'; +import {openPanelTab, openTab, openDetailTab, openAppTab, openSideNavItem, openColorTab} from './js/tabs'; +import toggleTooltip from './js/tooltip'; +import {downloadUiKit, createSVGuiKit} from './js/createSVGuiKit'; +import {toggleSwatchAttributes} from './js/toggleSwatchAttributes'; +import {pageLoader} from './js/pageLoader'; +import {format} from 'path'; +import {create3dModel} from './js/create3dModel'; +import {sortColorScales} from './js/sortColorScales'; +import {togglePopover} from './js/popover'; +import {forceSimulation} from 'd3'; + +const {readFileSync} = require('fs'); +const posthtml = require('posthtml'); const options = { /* see available options below */ }; posthtml() - .use(require("posthtml-modules")(options)) - .process(readFileSync("src/theme.html", "utf8")) + .use(require('posthtml-modules')(options)) + .process(readFileSync('src/theme.html', 'utf8')) .then((result) => result); window.updateParams = updateParams; function updateParams() { - let name = document.getElementById("themeNameInput").value; + let name = document.getElementById('themeNameInput').value; let ratios = getContrastRatioInputs(); let theme = { baseScale: _theme.backgroundColor.name, @@ -137,72 +123,70 @@ function updateParams() { colorKeys: c.colorKeys, colorspace: c.colorspace, ratios: ratios, - smooth: c.smooth, + smooth: c.smooth }; }), lightness: _theme.lightness, contrast: _theme.contrast, saturation: _theme.saturation, - formula: _theme.formula, + formula: _theme.formula }; let url = new URL(window.location); let params = new URLSearchParams(url.search.slice(1)); - params.set("name", name); // Theme name - params.set("config", JSON.stringify(theme)); // Configurations + params.set('name', name); // Theme name + params.set('config', JSON.stringify(theme)); // Configurations - window.history.replaceState({}, "", "?" + params); // update the page's URL. + window.history.replaceState({}, '', '?' + params); // update the page's URL. } -new ClipboardJS(".copyButton"); -new ClipboardJS(".themeOutputSwatch"); -new ClipboardJS(".copyThemeURL", { +new ClipboardJS('.copyButton'); +new ClipboardJS('.themeOutputSwatch'); +new ClipboardJS('.copyThemeURL', { text: function () { updateParams(); const params = window.location.href; let uri = window.location.toString(); - let cleanURL = uri.substring(0, uri.indexOf("?")); + let cleanURL = uri.substring(0, uri.indexOf('?')); window.history.replaceState({}, document.title, cleanURL); return params; - }, + } }); -window - .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", (event) => { - if (event.matches) { - //dark mode - document.querySelector("body").classList.remove("spectrum--light"); - document.querySelector("body").classList.add("spectrum--darkest"); - } else { - //light mode - document.querySelector("body").classList.add("spectrum--light"); - document.querySelector("body").classList.remove("spectrum--darkest"); - } - }); -const mq = window.matchMedia("(prefers-color-scheme: dark)"); +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { + if (event.matches) { + //dark mode + document.querySelector('body').classList.remove('spectrum--light'); + document.querySelector('body').classList.add('spectrum--darkest'); + } else { + //light mode + document.querySelector('body').classList.add('spectrum--light'); + document.querySelector('body').classList.remove('spectrum--darkest'); + } +}); +const mq = window.matchMedia('(prefers-color-scheme: dark)'); if (mq.matches) { //dark mode - document.querySelector("body").classList.add("spectrum--darkest"); + document.querySelector('body').classList.add('spectrum--darkest'); } else { //light mode - document.querySelector("body").classList.add("spectrum--light"); + document.querySelector('body').classList.add('spectrum--light'); } // Build the site based on URL parameters paramSetup(); // Default to CAM02ch for charts modes -document.getElementById("chartsMode").value = "CAM02p"; - -document.getElementById("tabPanelColorScales").click(); -document.getElementById("tabJSParameters").click(); -document.getElementById("tabPalette").click(); -document.getElementById("tabContrastingPairs").click(); -document.getElementById("welcome").click(); -document.getElementById("tabColorWheel").click(); +document.getElementById('chartsMode').value = 'CAM02p'; + +document.getElementById('tabPanelColorScales').click(); +document.getElementById('tabJSParameters').click(); +document.getElementById('tabPalette').click(); +document.getElementById('tabContrastingPairs').click(); +document.getElementById('welcome').click(); +document.getElementById('tabColorWheel').click(); window.onload = function () { pageLoader(); diff --git a/docs/ui/src/tools.html b/docs/ui/src/tools.html index f52aec91..d0fb5953 100644 --- a/docs/ui/src/tools.html +++ b/docs/ui/src/tools.html @@ -1,35 +1,34 @@ - - + - + - +
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- - - - +
+ + + +
- + diff --git a/docs/ui/src/tools.js b/docs/ui/src/tools.js index eca9c3e7..141f9149 100644 --- a/docs/ui/src/tools.js +++ b/docs/ui/src/tools.js @@ -10,125 +10,113 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import "@spectrum-css/vars/dist/spectrum-global.css"; -import "@spectrum-css/vars/dist/spectrum-medium.css"; -import "@spectrum-css/vars/dist/spectrum-light.css"; -import "@spectrum-css/vars/dist/spectrum-darkest.css"; +import '@spectrum-css/vars/dist/spectrum-global.css'; +import '@spectrum-css/vars/dist/spectrum-medium.css'; +import '@spectrum-css/vars/dist/spectrum-light.css'; +import '@spectrum-css/vars/dist/spectrum-darkest.css'; -import "@spectrum-css/page/dist/index-vars.css"; -import "@spectrum-css/icon/dist/index-vars.css"; -import "@spectrum-css/link/dist/index-vars.css"; -import "@spectrum-css/alert/dist/index-vars.css"; -import "@spectrum-css/radio/dist/index-vars.css"; -import "@spectrum-css/sidenav/dist/index-vars.css"; -import "@spectrum-css/dialog/dist/index-vars.css"; -import "@spectrum-css/button/dist/index-vars.css"; -import "@spectrum-css/badge/dist/index-vars.css"; -import "@spectrum-css/actionbutton/dist/index-vars.css"; -import "@spectrum-css/actiongroup/dist/index-vars.css"; -import "@spectrum-css/divider/dist/index-vars.css"; -import "@spectrum-css/fieldgroup/dist/index-vars.css"; -import "@spectrum-css/textfield/dist/index-vars.css"; -import "@spectrum-css/picker/dist/index-vars.css"; -import "@spectrum-css/fieldlabel/dist/index-vars.css"; -import "@spectrum-css/checkbox/dist/index-vars.css"; -import "@spectrum-css/switch/dist/index-vars.css"; -import "@spectrum-css/buttongroup/dist/index-vars.css"; -import "@spectrum-css/tooltip/dist/index-vars.css"; -import "@spectrum-css/slider/dist/index-vars.css"; -import "@spectrum-css/tabs/dist/index-vars.css"; -import "@spectrum-css/toast/dist/index-vars.css"; -import "@spectrum-css/illustratedmessage/dist/index-vars.css"; -import "@spectrum-css/typography/dist/index-vars.css"; -import "@spectrum-css/progresscircle/dist/index-vars.css"; -import "@spectrum-css/progressbar/dist/index-vars.css"; -import "@spectrum-css/table/dist/index-vars.css"; +import '@spectrum-css/page/dist/index-vars.css'; +import '@spectrum-css/icon/dist/index-vars.css'; +import '@spectrum-css/link/dist/index-vars.css'; +import '@spectrum-css/alert/dist/index-vars.css'; +import '@spectrum-css/radio/dist/index-vars.css'; +import '@spectrum-css/sidenav/dist/index-vars.css'; +import '@spectrum-css/dialog/dist/index-vars.css'; +import '@spectrum-css/button/dist/index-vars.css'; +import '@spectrum-css/badge/dist/index-vars.css'; +import '@spectrum-css/actionbutton/dist/index-vars.css'; +import '@spectrum-css/actiongroup/dist/index-vars.css'; +import '@spectrum-css/divider/dist/index-vars.css'; +import '@spectrum-css/fieldgroup/dist/index-vars.css'; +import '@spectrum-css/textfield/dist/index-vars.css'; +import '@spectrum-css/picker/dist/index-vars.css'; +import '@spectrum-css/fieldlabel/dist/index-vars.css'; +import '@spectrum-css/checkbox/dist/index-vars.css'; +import '@spectrum-css/switch/dist/index-vars.css'; +import '@spectrum-css/buttongroup/dist/index-vars.css'; +import '@spectrum-css/tooltip/dist/index-vars.css'; +import '@spectrum-css/slider/dist/index-vars.css'; +import '@spectrum-css/tabs/dist/index-vars.css'; +import '@spectrum-css/toast/dist/index-vars.css'; +import '@spectrum-css/illustratedmessage/dist/index-vars.css'; +import '@spectrum-css/typography/dist/index-vars.css'; +import '@spectrum-css/progresscircle/dist/index-vars.css'; +import '@spectrum-css/progressbar/dist/index-vars.css'; +import '@spectrum-css/table/dist/index-vars.css'; -import "./scss/style.scss"; -import "./scss/colorinputs.scss"; -import "./scss/components/articleCard.scss"; -import "./scss/components/colorPicker.scss"; -import "./scss/components/colorSlider.scss"; -import "./scss/components/dialog.scss"; -import "./scss/components/header.scss"; -import "./scss/components/highlightCode.scss"; -import "./scss/components/imageUploader.scss"; -import "./scss/components/outputSwatches.scss"; -import "./scss/components/panelAccordion.scss"; -import "./scss/components/popover.scss"; -import "./scss/components/sections.scss"; -import "./scss/components/selectBox.scss"; -import "./scss/components/statusLabel.scss"; -import "./scss/components/textfield.scss"; -import "./scss/components/toast.scss"; -import "./scss/components/tooltip.scss"; +import './scss/style.scss'; +import './scss/colorinputs.scss'; +import './scss/components/articleCard.scss'; +import './scss/components/colorPicker.scss'; +import './scss/components/colorSlider.scss'; +import './scss/components/dialog.scss'; +import './scss/components/header.scss'; +import './scss/components/highlightCode.scss'; +import './scss/components/imageUploader.scss'; +import './scss/components/outputSwatches.scss'; +import './scss/components/panelAccordion.scss'; +import './scss/components/popover.scss'; +import './scss/components/sections.scss'; +import './scss/components/selectBox.scss'; +import './scss/components/statusLabel.scss'; +import './scss/components/textfield.scss'; +import './scss/components/toast.scss'; +import './scss/components/tooltip.scss'; -import "@adobe/focus-ring-polyfill"; -import { pageLoader } from "./js/pageLoader"; +import '@adobe/focus-ring-polyfill'; +import {pageLoader} from './js/pageLoader'; -import loadIcons from "loadicons"; -loadIcons("./spectrum-css-icons.svg"); -loadIcons("./spectrum-icons.svg"); +import loadIcons from 'loadicons'; +loadIcons('./spectrum-css-icons.svg'); +loadIcons('./spectrum-icons.svg'); // Import local Javascript functions -import { throttle } from "./js/utils"; -import { openPanelTab, openTab, openAppTab, openSideNavItem } from "./js/tabs"; -import toggleTooltip from "./js/tooltip"; -import { compareColors } from "./js/compareColors"; -import { convertColors } from "./js/convertColors"; -import { - bulkConvert, - bulkItemConvertColorInput, - cancelBulkConvert, -} from "./js/bulkConvertDialog"; +import {throttle} from './js/utils'; +import {openPanelTab, openTab, openAppTab, openSideNavItem} from './js/tabs'; +import toggleTooltip from './js/tooltip'; +import {compareColors} from './js/compareColors'; +import {convertColors} from './js/convertColors'; +import {bulkConvert, bulkItemConvertColorInput, cancelBulkConvert} from './js/bulkConvertDialog'; -const { readFileSync } = require("fs"); -const posthtml = require("posthtml"); +const {readFileSync} = require('fs'); +const posthtml = require('posthtml'); const options = { /* see available options below */ }; posthtml() - .use(require("posthtml-modules")(options)) - .process(readFileSync("src/index.html", "utf8")) + .use(require('posthtml-modules')(options)) + .process(readFileSync('src/index.html', 'utf8')) .then((result) => result); -window - .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", (event) => { - if (event.matches) { - //dark mode - document.querySelector("body").classList.remove("spectrum--light"); - document.querySelector("body").classList.add("spectrum--darkest"); - } else { - //light mode - document.querySelector("body").classList.add("spectrum--light"); - document.querySelector("body").classList.remove("spectrum--darkest"); - } - }); -const mq = window.matchMedia("(prefers-color-scheme: dark)"); +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { + if (event.matches) { + //dark mode + document.querySelector('body').classList.remove('spectrum--light'); + document.querySelector('body').classList.add('spectrum--darkest'); + } else { + //light mode + document.querySelector('body').classList.add('spectrum--light'); + document.querySelector('body').classList.remove('spectrum--darkest'); + } +}); +const mq = window.matchMedia('(prefers-color-scheme: dark)'); if (mq.matches) { //dark mode - document.querySelector("body").classList.add("spectrum--darkest"); + document.querySelector('body').classList.add('spectrum--darkest'); } else { //light mode - document.querySelector("body").classList.add("spectrum--light"); + document.querySelector('body').classList.add('spectrum--light'); } -document.getElementById("tabContrast").click(); -document.getElementById("tabSubPanelContrastChart").click(); -document.getElementById("welcome").click(); +document.getElementById('tabContrast').click(); +document.getElementById('tabSubPanelContrastChart').click(); +document.getElementById('welcome').click(); -document - .getElementById("compareColorOneInput") - .dispatchEvent(new Event("input")); -document - .getElementById("compareColorTwoInput") - .dispatchEvent(new Event("input")); +document.getElementById('compareColorOneInput').dispatchEvent(new Event('input')); +document.getElementById('compareColorTwoInput').dispatchEvent(new Event('input')); -document - .getElementById("convertColorOneInput") - .dispatchEvent(new Event("input")); +document.getElementById('convertColorOneInput').dispatchEvent(new Event('input')); window.onload = function () { // On window load, transition to remove page loader diff --git a/docs/ui/src/views/GithubLink.html b/docs/ui/src/views/GithubLink.html index 4d4f3d02..c47e932d 100644 --- a/docs/ui/src/views/GithubLink.html +++ b/docs/ui/src/views/GithubLink.html @@ -1,15 +1,5 @@ - - + + -

- Leonardo -

+

Leonardo

diff --git a/docs/ui/src/views/dialog_bulkColorConverter.html b/docs/ui/src/views/dialog_bulkColorConverter.html index f924c1d2..853110dd 100644 --- a/docs/ui/src/views/dialog_bulkColorConverter.html +++ b/docs/ui/src/views/dialog_bulkColorConverter.html @@ -1,310 +1,149 @@ -
+

Convert bulk

-
+
-

- Enter hex colors separated by comma or new line. -

-

- Colors will be converted into the selected color spaces and downloaded - as a CSV file. -

+

Enter hex colors separated by comma or new line.

+

Colors will be converted into the selected color spaces and downloaded as a CSV file.
- -
- + +
+
- +
-
-
-
-
- - +
+ +
diff --git a/docs/ui/src/views/dialog_importURL.html b/docs/ui/src/views/dialog_importURL.html index 780130bd..26b22b42 100644 --- a/docs/ui/src/views/dialog_importURL.html +++ b/docs/ui/src/views/dialog_importURL.html @@ -4,38 +4,20 @@

Import from URL

-

- Enter the URL of your existing color to add to this theme. -

-

- The configurations will be added to a new color scale. -

+

Enter the URL of your existing color to add to this theme.

+

The configurations will be added to a new color scale.
- +
- +
- - + +
diff --git a/docs/ui/src/views/footer.html b/docs/ui/src/views/footer.html index 0b932f9c..0296bbe7 100644 --- a/docs/ui/src/views/footer.html +++ b/docs/ui/src/views/footer.html @@ -2,9 +2,7 @@

Leonardo is an - - Adobe Open Source - + Adobe Open Source project.

diff --git a/docs/ui/src/views/header.html b/docs/ui/src/views/header.html index 4d8c8435..0b6cc044 100644 --- a/docs/ui/src/views/header.html +++ b/docs/ui/src/views/header.html @@ -2,27 +2,10 @@
-
-