@cas-smartdesign/styles 3.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/LICENSE +8 -0
  2. package/dist/docs/doc.css +1 -0
  3. package/dist/docs/doc.mjs +273 -0
  4. package/dist/docs/index.html +30 -0
  5. package/dist/styles.css +3 -0
  6. package/dist/styles.css.map +36 -0
  7. package/dist/theme.css +3 -0
  8. package/dist/theme.css.map +38 -0
  9. package/npm-third-party-licenses.json +187 -0
  10. package/package.json +31 -0
  11. package/readme.md +59 -0
  12. package/scss/modules/_app.scss +10 -0
  13. package/scss/modules/_base_colors.scss +170 -0
  14. package/scss/modules/_button.scss +37 -0
  15. package/scss/modules/_colors.scss +9 -0
  16. package/scss/modules/_index.scss +9 -0
  17. package/scss/modules/_link.scss +11 -0
  18. package/scss/modules/_misc.scss +6 -0
  19. package/scss/modules/_spacing.scss +29 -0
  20. package/scss/modules/_token.scss +16 -0
  21. package/scss/modules/_typography.scss +28 -0
  22. package/scss/styles.scss +2 -0
  23. package/scss/theme.scss +95 -0
  24. package/scss/variables/_base_colors.scss +22 -0
  25. package/scss/variables/_button.scss +13 -0
  26. package/scss/variables/_colors.scss +6 -0
  27. package/scss/variables/_field.scss +1 -0
  28. package/scss/variables/_index.scss +6 -0
  29. package/scss/variables/_spacing.scss +4 -0
  30. package/scss/variables/_typography.scss +11 -0
package/dist/docs/index.html ADDED
@@ -0,0 +1,30 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <title>Styles</title>
7
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
8
+ <style>
9
+ .markdown-body {
10
+ box-sizing: border-box;
11
+ min-width: 200px;
12
+ max-width: 980px;
13
+ margin: 0 auto !important;
14
+ padding-bottom: 45px;
15
+ }
16
+
17
+ .markdown-body .sd-web-app h1 {
18
+ border-bottom: transparent;
19
+ }
20
+ </style>
21
+ <script type="module" crossorigin src="./doc.mjs"></script>
22
+ <link rel="stylesheet" crossorigin href="./doc.css">
23
+ </head>
24
+
25
+ <body>
26
+ <div class="markdown-body">
27
+ <div id="markdown-container"></div>
28
+ </div>
29
+ </body>
30
+ </html>
package/dist/styles.css ADDED
@@ -0,0 +1,3 @@
1
+ .sd-primary-text,.sd-hyperlink,.sd-web-app{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:16px;color:#111}.sd-secondary-text,.sd-field-caption{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:13px;color:#767676}.sd-heading-text,.sd-content-heading{font-family:"Segoe UI Light","Segoe UI","Lucida Sans",Arial,sans-serif;font-size:24px;font-weight:lighter;color:#555}.sd-content-heading{padding-bottom:16px}.sd-app-background,.sd-web-app{background:#f2f2f2}.sd-content-background{background:#fff}.sd-web-app{margin:0;cursor:default}.sd-red{color:#cc0017 !important}.sd-red-background{background-color:#cc0017 !important}.sd-orange{color:#ff6b11 !important}.sd-orange-background{background-color:#ff6b11 !important}.sd-yellow{color:#fb1 !important}.sd-yellow-background{background-color:#fb1 !important}.sd-lightgreen{color:#8abd0c !important}.sd-lightgreen-background{background-color:#8abd0c !important}.sd-green{color:#009621 !important}.sd-green-background{background-color:#009621 !important}.sd-teal{color:#0099c5 !important}.sd-teal-background{background-color:#0099c5 !important}.sd-lightblue{color:#0d98ff !important}.sd-lightblue-background{background-color:#0d98ff !important}.sd-blue{color:#1467ba !important}.sd-blue-background{background-color:#1467ba !important}.sd-pink{color:#c41579 !important}.sd-pink-background{background-color:#c41579 !important}.sd-purple{color:#6c127b !important}.sd-purple-background{background-color:#6c127b !important}.sd-brown{color:#593b20 !important}.sd-brown-background{background-color:#593b20 !important}.sd-white{color:#fff !important}.sd-white-background{background-color:#fff !important}.sd-palegrey{color:#f2f2f2 !important}.sd-palegrey-background{background-color:#f2f2f2 !important}.sd-lightgrey{color:#d9d9d9 !important}.sd-lightgrey-background{background-color:#d9d9d9 !important}.sd-silver{color:#ccc !important}.sd-silver-background{background-color:#ccc !important}.sd-grey{color:#767676 !important}.sd-grey-background{background-color:#767676 !important}.sd-darkgrey{color:#555 !important}.sd-darkgrey-background{background-color:#555 !important}.sd-black{color:#111 !important}.sd-black-background{background-color:#111 !important}.field-validation-warn-color{color:#555 !important}.field-validation-warn-color-background{background-color:#555 !important}.field-validation-suggest-color{color:#bf8800 !important}.field-validation-suggest-color-background{background-color:#bf8800 !important}.field-validation-error-color{color:#cc0017 !important}.field-validation-error-color-background{background-color:#cc0017 !important}.sd-button{background:rgba(20,103,186,0);color:#1467ba;border:none;outline:none;padding:0 16px;height:32px;cursor:pointer}.sd-button:hover{background:rgba(20,103,186,.1)}.sd-button:focus{background:rgba(20,103,186,.1)}.sd-button:active{background:rgba(20,103,186,.2)}.sd-button.primary{background:#1467ba;color:#fff}.sd-button.primary:hover{background:#2c76c1}.sd-button.primary:focus{background:#2c76c1}.sd-button.primary:active{background:#4385c8}.sd-app-background,.sd-web-app{background:#f2f2f2}.sd-content-background{background:#fff}.sd-primary-text,.sd-hyperlink,.sd-web-app{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:16px;color:#111}.sd-secondary-text,.sd-field-caption{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:13px;color:#767676}.sd-heading-text,.sd-content-heading{font-family:"Segoe UI Light","Segoe UI","Lucida Sans",Arial,sans-serif;font-size:24px;font-weight:lighter;color:#555}.sd-content-heading{padding-bottom:16px}.sd-hyperlink{text-decoration:none}.sd-hyperlink:hover{text-decoration:underline}.sd-app-background,.sd-web-app{background:#f2f2f2}.sd-content-background{background:#fff}.sd-separator-line{background:#d9d9d9;height:1px}.sd-tiny-padding{padding:4px}.sd-tiny-margin{margin:4px}.sd-small-padding{padding:8px}.sd-small-margin{margin:8px}.sd-normal-padding{padding:16px}.sd-normal-margin{margin:16px}.sd-large-padding{padding:24px}.sd-large-margin{margin:24px}.sd-token-container{display:flex;flex-wrap:wrap}.sd-token{height:28px;margin:4px 8px 4px 0px;padding:0 8px;background:#f2f2f2;display:flex;align-items:center}.sd-primary-text,.sd-web-app,.sd-hyperlink{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:16px;color:#111}.sd-secondary-text,.sd-field-caption{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:13px;color:#767676}.sd-heading-text,.sd-content-heading{font-family:"Segoe UI Light","Segoe UI","Lucida Sans",Arial,sans-serif;font-size:24px;font-weight:lighter;color:#555}.sd-content-heading{padding-bottom:16px}
2
+
3
+ /*# sourceMappingURL=styles.css.map */
package/dist/styles.css.map ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "version": 3,
3
+ "sourceRoot": "",
4
+ "sources": [
5
+ "../scss/modules/_typography.scss",
6
+ "../scss/variables/_typography.scss",
7
+ "../scss/variables/_base_colors.scss",
8
+ "../scss/variables/_spacing.scss",
9
+ "../scss/modules/_colors.scss",
10
+ "../scss/modules/_app.scss",
11
+ "../scss/modules/_base_colors.scss",
12
+ "../scss/modules/_button.scss",
13
+ "../scss/variables/_button.scss",
14
+ "../scss/modules/_link.scss",
15
+ "../scss/modules/_misc.scss",
16
+ "../scss/modules/_spacing.scss",
17
+ "../scss/modules/_token.scss"
18
+ ],
19
+ "names": [],
20
+ "mappings": "AAGA,2CACC,YCFgB,0CDGhB,UCDsB,KDEtB,MEWU,KFRX,qCAEC,YCTgB,0CDUhB,UCNwB,KDOxB,MEES,QFCV,qCACC,YCdsB,2DDetB,UCVsB,KDWtB,YCVwB,QDWxB,MEJa,KFOd,oBAGC,eGxBmB,oCCCnB,WFSa,QENd,uBACC,WFIU,KGRX,YAIC,SACA,eCLD,QACC,yBAGD,mBACC,oCAGD,WACC,yBAGD,sBACC,oCAGD,WACC,sBAGD,sBACC,iCAGD,eACC,yBAGD,0BACC,oCAGD,UACC,yBAGD,qBACC,oCAGD,SACC,yBAGD,oBACC,oCAGD,cACC,yBAGD,yBACC,oCAGD,SACC,yBAGD,oBACC,oCAGD,SACC,yBAGD,oBACC,oCAGD,WACC,yBAGD,sBACC,oCAGD,UACC,yBAGD,qBACC,oCAGD,UACC,sBAGD,qBACC,iCAGD,aACC,yBAGD,wBACC,oCAGD,cACC,yBAGD,yBACC,oCAGD,WACC,sBAGD,sBACC,iCAGD,SACC,yBAGD,oBACC,oCAGD,aACC,sBAGD,wBACC,iCAGD,UACC,sBAGD,qBACC,iCAGD,6BACC,sBAGD,wCACC,iCAGD,gCACC,yBAGD,2CACC,oCAGD,8BACC,yBAGD,yCACC,oCCrKD,WACC,WCDsB,mBDEtB,MLES,QKDT,YACA,aACA,eACA,YACA,eAEA,iBACC,WCT2B,oBDW5B,iBACC,WCX2B,oBDa5B,kBACC,WCb4B,oBDgB7B,mBACC,WLhBQ,QKiBR,MLbS,KKeT,yBACC,WCjBkC,QDmBnC,yBACC,WCnBkC,QDqBnC,0BACC,WCrBmC,QJVtC,+BACC,WFSa,QENd,uBACC,WFIU,KFRX,2CACC,YCFgB,0CDGhB,UCDsB,KDEtB,MEWU,KFRX,qCAEC,YCTgB,0CDUhB,UCNwB,KDOxB,MEES,QFCV,qCACC,YCdsB,2DDetB,UCVsB,KDWtB,YCVwB,QDWxB,MEJa,KFOd,oBAGC,eGxBmB,mBMGnB,qBAEA,oBACC,0BLNF,+BACC,WFSa,QENd,uBACC,WFIU,KQTX,mBACC,WRUc,QQTd,WCFD,iBACC,QRHiB,IQKlB,gBACC,ORNiB,IQSlB,kBACC,QRTkB,IQWnB,iBACC,ORZkB,IQenB,mBACC,QRfmB,KQiBpB,kBACC,ORlBmB,KQqBpB,kBACC,QRrBkB,KQuBnB,iBACC,ORxBkB,yBSClB,aACA,eAGD,UACC,YACA,uBACA,cACA,mBACA,aACA,mBZXD,2CACC,YCFgB,0CDGhB,UCDsB,KDEtB,MEWU,KFRX,qCAEC,YCTgB,0CDUhB,UCNwB,KDOxB,MEES,QFCV,qCACC,YCdsB,2DDetB,UCVsB,KDWtB,YCVwB,QDWxB,MEJa,KFOd,oBAGC,eGxBmB",
21
+ "sourcesContent": [
22
+ "@import \"../variables/typography\";\n@import \"../variables/spacing\";\n\n.sd-primary-text {\n\tfont-family: $sd-font-family;\n\tfont-size: $sd-primary-font-size;\n\tcolor: $sd-primary-text-color;\n}\n\n.sd-secondary-text,\n.sd-field-caption {\n\tfont-family: $sd-font-family;\n\tfont-size: $sd-secondary-font-size;\n\tcolor: $sd-secondary-text-color;\n}\n\n.sd-heading-text {\n\tfont-family: $sd-font-family-light;\n\tfont-size: $sd-heading-font-size;\n\tfont-weight: $sd-heading-font-weight;\n\tcolor: $sd-heading-text-color;\n}\n\n.sd-content-heading {\n\t@extend .sd-heading-text;\n\n\tpadding-bottom: $sd-normal-spacing;\n}\n",
23
+ "@import \"./colors\";\n\n$sd-font-family: \"Segoe UI\", \"Lucida Sans\", Arial, sans-serif !default;\n$sd-font-family-light: \"Segoe UI Light\", \"Segoe UI\", \"Lucida Sans\", Arial, sans-serif !default;\n$sd-primary-font-size: 16px !default;\n$sd-primary-text-color: $sd-black !default;\n$sd-secondary-font-size: 13px !default;\n$sd-secondary-text-color: $sd-grey !default;\n$sd-heading-font-size: 24px !default;\n$sd-heading-font-weight: lighter !default;\n$sd-heading-text-color: $sd-darkgrey !default;\n",
24
+ "$sd-red: #cc0017;\n$sd-orange: #ff6b11;\n$sd-yellow: #ffbb11;\n$sd-lightgreen: #8abd0c;\n$sd-green: #009621;\n$sd-teal: #0099c5;\n$sd-lightblue: #0d98ff;\n$sd-blue: #1467ba;\n$sd-pink: #c41579;\n$sd-purple: #6c127b;\n$sd-brown: #593b20;\n$sd-white: #fff;\n$sd-palegrey: #f2f2f2;\n$sd-lightgrey: #d9d9d9;\n$sd-silver: #ccc;\n$sd-grey: #767676;\n$sd-darkgrey: #555;\n$sd-black: #111;\n\n$field-validation-warn-color: #555555;\n$field-validation-suggest-color: #bf8800;\n$field-validation-error-color: #cc0017;\n",
25
+ "$sd-tiny-spacing: 4px !default;\n$sd-small-spacing: 8px !default;\n$sd-normal-spacing: 16px !default;\n$sd-large-spacing: 24px !default;\n",
26
+ "@import \"../variables/colors\";\n\n.sd-app-background {\n\tbackground: $sd-app-background;\n}\n\n.sd-content-background {\n\tbackground: $sd-content-background;\n}\n",
27
+ "@import \"typography\";\n@import \"colors\";\n\n.sd-web-app {\n\t@extend .sd-primary-text;\n\t@extend .sd-app-background;\n\n\tmargin: 0;\n\tcursor: default;\n}\n",
28
+ "/* Generated by 'generate-colors-scss.js', do not touch */\n@import \"../variables/base_colors\";\n\n.sd-red {\n\tcolor: $sd-red !important;\n}\n\n.sd-red-background {\n\tbackground-color: $sd-red !important;\n}\n\n.sd-orange {\n\tcolor: $sd-orange !important;\n}\n\n.sd-orange-background {\n\tbackground-color: $sd-orange !important;\n}\n\n.sd-yellow {\n\tcolor: $sd-yellow !important;\n}\n\n.sd-yellow-background {\n\tbackground-color: $sd-yellow !important;\n}\n\n.sd-lightgreen {\n\tcolor: $sd-lightgreen !important;\n}\n\n.sd-lightgreen-background {\n\tbackground-color: $sd-lightgreen !important;\n}\n\n.sd-green {\n\tcolor: $sd-green !important;\n}\n\n.sd-green-background {\n\tbackground-color: $sd-green !important;\n}\n\n.sd-teal {\n\tcolor: $sd-teal !important;\n}\n\n.sd-teal-background {\n\tbackground-color: $sd-teal !important;\n}\n\n.sd-lightblue {\n\tcolor: $sd-lightblue !important;\n}\n\n.sd-lightblue-background {\n\tbackground-color: $sd-lightblue !important;\n}\n\n.sd-blue {\n\tcolor: $sd-blue !important;\n}\n\n.sd-blue-background {\n\tbackground-color: $sd-blue !important;\n}\n\n.sd-pink {\n\tcolor: $sd-pink !important;\n}\n\n.sd-pink-background {\n\tbackground-color: $sd-pink !important;\n}\n\n.sd-purple {\n\tcolor: $sd-purple !important;\n}\n\n.sd-purple-background {\n\tbackground-color: $sd-purple !important;\n}\n\n.sd-brown {\n\tcolor: $sd-brown !important;\n}\n\n.sd-brown-background {\n\tbackground-color: $sd-brown !important;\n}\n\n.sd-white {\n\tcolor: $sd-white !important;\n}\n\n.sd-white-background {\n\tbackground-color: $sd-white !important;\n}\n\n.sd-palegrey {\n\tcolor: $sd-palegrey !important;\n}\n\n.sd-palegrey-background {\n\tbackground-color: $sd-palegrey !important;\n}\n\n.sd-lightgrey {\n\tcolor: $sd-lightgrey !important;\n}\n\n.sd-lightgrey-background {\n\tbackground-color: $sd-lightgrey !important;\n}\n\n.sd-silver {\n\tcolor: $sd-silver !important;\n}\n\n.sd-silver-background {\n\tbackground-color: $sd-silver !important;\n}\n\n.sd-grey {\n\tcolor: $sd-grey !important;\n}\n\n.sd-grey-background {\n\tbackground-color: $sd-grey !important;\n}\n\n.sd-darkgrey {\n\tcolor: $sd-darkgrey !important;\n}\n\n.sd-darkgrey-background {\n\tbackground-color: $sd-darkgrey !important;\n}\n\n.sd-black {\n\tcolor: $sd-black !important;\n}\n\n.sd-black-background {\n\tbackground-color: $sd-black !important;\n}\n\n.field-validation-warn-color {\n\tcolor: $field-validation-warn-color !important;\n}\n\n.field-validation-warn-color-background {\n\tbackground-color: $field-validation-warn-color !important;\n}\n\n.field-validation-suggest-color {\n\tcolor: $field-validation-suggest-color !important;\n}\n\n.field-validation-suggest-color-background {\n\tbackground-color: $field-validation-suggest-color !important;\n}\n\n.field-validation-error-color {\n\tcolor: $field-validation-error-color !important;\n}\n\n.field-validation-error-color-background {\n\tbackground-color: $field-validation-error-color !important;\n}\n",
29
+ "@import \"../variables/button\";\n@import \"../variables/spacing\";\n\n.sd-button {\n\tbackground: $sd-button-background;\n\tcolor: $sd-button-color;\n\tborder: none;\n\toutline: none;\n\tpadding: 0 $sd-normal-spacing;\n\theight: 32px;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground: $sd-button-hover-background;\n\t}\n\t&:focus {\n\t\tbackground: $sd-button-focus-background;\n\t}\n\t&:active {\n\t\tbackground: $sd-button-active-background;\n\t}\n\n\t&.primary {\n\t\tbackground: $sd-primary-button-background;\n\t\tcolor: $sd-primary-button-color;\n\n\t\t&:hover {\n\t\t\tbackground: $sd-primary-button-hover-background;\n\t\t}\n\t\t&:focus {\n\t\t\tbackground: $sd-primary-button-focus-background;\n\t\t}\n\t\t&:active {\n\t\t\tbackground: $sd-primary-button-active-background;\n\t\t}\n\t}\n}\n",
30
+ "@import \"colors\";\n\n$sd-button-color: $sd-interaction-color !default;\n$sd-button-background: rgba($sd-button-color, 0) !default; /* Transparent */\n$sd-button-hover-background: mix($sd-button-color, $sd-button-background, 10%);\n$sd-button-focus-background: mix($sd-button-color, $sd-button-background, 10%);\n$sd-button-active-background: mix($sd-button-color, $sd-button-background, 20%);\n\n$sd-primary-button-color: $sd-white !default;\n$sd-primary-button-background: $sd-button-color !default;\n$sd-primary-button-hover-background: mix($sd-primary-button-color, $sd-primary-button-background, 10%);\n$sd-primary-button-focus-background: mix($sd-primary-button-color, $sd-primary-button-background, 10%);\n$sd-primary-button-active-background: mix($sd-primary-button-color, $sd-primary-button-background, 20%);\n",
31
+ "@import \"./typography\";\n\n.sd-hyperlink {\n\t@extend .sd-primary-text;\n\n\ttext-decoration: none;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t}\n}\n",
32
+ "@import \"colors\";\n\n.sd-separator-line {\n\tbackground: $sd-separator-color;\n\theight: 1px;\n}\n",
33
+ "@import \"../variables/spacing\";\n\n.sd-tiny-padding {\n\tpadding: $sd-tiny-spacing;\n}\n.sd-tiny-margin {\n\tmargin: $sd-tiny-spacing;\n}\n\n.sd-small-padding {\n\tpadding: $sd-small-spacing;\n}\n.sd-small-margin {\n\tmargin: $sd-small-spacing;\n}\n\n.sd-normal-padding {\n\tpadding: $sd-normal-spacing;\n}\n.sd-normal-margin {\n\tmargin: $sd-normal-spacing;\n}\n\n.sd-large-padding {\n\tpadding: $sd-large-spacing;\n}\n.sd-large-margin {\n\tmargin: $sd-large-spacing;\n}\n",
34
+ "@import \"../variables/base_colors\";\n@import \"../variables/spacing\";\n\n.sd-token-container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n\n.sd-token {\n\theight: 28px;\n\tmargin: $sd-tiny-spacing $sd-small-spacing $sd-tiny-spacing 0px;\n\tpadding: 0 $sd-small-spacing;\n\tbackground: $sd-palegrey;\n\tdisplay: flex;\n\talign-items: center;\n}\n"
35
+ ]
36
+ }
package/dist/theme.css ADDED
@@ -0,0 +1,3 @@
1
+ .sd-primary-text,input[type=text],input[type=password],textarea,.sd-hyperlink,a,.sd-web-app,body{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:16px;color:#111}.sd-secondary-text,small,.sd-field-caption,label{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:13px;color:#767676}.sd-heading-text,h1,.sd-content-heading,h2,h3,h4,h5,h6{font-family:"Segoe UI Light","Segoe UI","Lucida Sans",Arial,sans-serif;font-size:24px;font-weight:lighter;color:#555}.sd-content-heading,h2,h3,h4,h5,h6{padding-bottom:16px}.sd-app-background,.sd-web-app,body{background:#f2f2f2}.sd-content-background,section{background:#fff}.sd-web-app,body{margin:0;cursor:default}.sd-red{color:#cc0017 !important}.sd-red-background{background-color:#cc0017 !important}.sd-orange{color:#ff6b11 !important}.sd-orange-background{background-color:#ff6b11 !important}.sd-yellow{color:#fb1 !important}.sd-yellow-background{background-color:#fb1 !important}.sd-lightgreen{color:#8abd0c !important}.sd-lightgreen-background{background-color:#8abd0c !important}.sd-green{color:#009621 !important}.sd-green-background{background-color:#009621 !important}.sd-teal{color:#0099c5 !important}.sd-teal-background{background-color:#0099c5 !important}.sd-lightblue{color:#0d98ff !important}.sd-lightblue-background{background-color:#0d98ff !important}.sd-blue{color:#1467ba !important}.sd-blue-background{background-color:#1467ba !important}.sd-pink{color:#c41579 !important}.sd-pink-background{background-color:#c41579 !important}.sd-purple{color:#6c127b !important}.sd-purple-background{background-color:#6c127b !important}.sd-brown{color:#593b20 !important}.sd-brown-background{background-color:#593b20 !important}.sd-white{color:#fff !important}.sd-white-background{background-color:#fff !important}.sd-palegrey{color:#f2f2f2 !important}.sd-palegrey-background{background-color:#f2f2f2 !important}.sd-lightgrey{color:#d9d9d9 !important}.sd-lightgrey-background{background-color:#d9d9d9 !important}.sd-silver{color:#ccc !important}.sd-silver-background{background-color:#ccc !important}.sd-grey{color:#767676 !important}.sd-grey-background{background-color:#767676 !important}.sd-darkgrey{color:#555 !important}.sd-darkgrey-background{background-color:#555 !important}.sd-black{color:#111 !important}.sd-black-background{background-color:#111 !important}.field-validation-warn-color{color:#555 !important}.field-validation-warn-color-background{background-color:#555 !important}.field-validation-suggest-color{color:#bf8800 !important}.field-validation-suggest-color-background{background-color:#bf8800 !important}.field-validation-error-color{color:#cc0017 !important}.field-validation-error-color-background{background-color:#cc0017 !important}.sd-button,button,input[type=button]{background:rgba(20,103,186,0);color:#1467ba;border:none;outline:none;padding:0 16px;height:32px;cursor:pointer}.sd-button:hover,button:hover,input[type=button]:hover{background:rgba(20,103,186,.1)}.sd-button:focus,button:focus,input[type=button]:focus{background:rgba(20,103,186,.1)}.sd-button:active,button:active,input[type=button]:active{background:rgba(20,103,186,.2)}.sd-button.primary,button.primary,input.primary[type=button]{background:#1467ba;color:#fff}.sd-button.primary:hover,button.primary:hover,input.primary[type=button]:hover{background:#2c76c1}.sd-button.primary:focus,button.primary:focus,input.primary[type=button]:focus{background:#2c76c1}.sd-button.primary:active,button.primary:active,input.primary[type=button]:active{background:#4385c8}.sd-app-background,.sd-web-app,body{background:#f2f2f2}.sd-content-background,section{background:#fff}.sd-primary-text,input[type=text],input[type=password],textarea,.sd-hyperlink,a,.sd-web-app,body{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:16px;color:#111}.sd-secondary-text,small,.sd-field-caption,label{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:13px;color:#767676}.sd-heading-text,h1,.sd-content-heading,h2,h3,h4,h5,h6{font-family:"Segoe UI Light","Segoe UI","Lucida Sans",Arial,sans-serif;font-size:24px;font-weight:lighter;color:#555}.sd-content-heading,h2,h3,h4,h5,h6{padding-bottom:16px}.sd-hyperlink,a{text-decoration:none}.sd-hyperlink:hover,a:hover{text-decoration:underline}.sd-app-background,.sd-web-app,body{background:#f2f2f2}.sd-content-background,section{background:#fff}.sd-separator-line,hr{background:#d9d9d9;height:1px}.sd-tiny-padding{padding:4px}.sd-tiny-margin{margin:4px}.sd-small-padding{padding:8px}.sd-small-margin{margin:8px}.sd-normal-padding{padding:16px}.sd-normal-margin{margin:16px}.sd-large-padding,section{padding:24px}.sd-large-margin{margin:24px}.sd-token-container{display:flex;flex-wrap:wrap}.sd-token{height:28px;margin:4px 8px 4px 0px;padding:0 8px;background:#f2f2f2;display:flex;align-items:center}.sd-primary-text,input[type=text],input[type=password],textarea,.sd-web-app,body,.sd-hyperlink,a{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:16px;color:#111}.sd-secondary-text,small,.sd-field-caption,label{font-family:"Segoe UI","Lucida Sans",Arial,sans-serif;font-size:13px;color:#767676}.sd-heading-text,h1,.sd-content-heading,h2,h3,h4,h5,h6{font-family:"Segoe UI Light","Segoe UI","Lucida Sans",Arial,sans-serif;font-size:24px;font-weight:lighter;color:#555}.sd-content-heading,h2,h3,h4,h5,h6{padding-bottom:16px}h1{margin:0;padding:0}h2,h3,h4,h5,h6{margin:0}label{display:block}small{margin:0}hr{margin:4px 0;border:none}section{margin:0}input[type=text],input[type=password],textarea{background:#fff;width:100%;border:none;border-bottom:1px solid #959595;margin-bottom:8px;padding-top:2px;padding-bottom:3px}input[type=text]:focus,input[type=password]:focus,textarea:focus{border-bottom:2px solid #1467ba;outline:none;padding-bottom:2px}input[type=text]:-moz-read-only,input[type=password]:-moz-read-only,textarea:-moz-read-only{border-bottom:1px dashed #959595;padding-bottom:3px}input[type=text]:read-only,input[type=password]:read-only,textarea:read-only{border-bottom:1px dashed #959595;padding-bottom:3px}input[type=text]:disabled,input[type=password]:disabled,textarea:disabled{border-bottom:1px dashed #959595;background:#fff}textarea{box-sizing:content-box;resize:none;height:120px}
2
+
3
+ /*# sourceMappingURL=theme.css.map */
package/dist/theme.css.map ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "version": 3,
3
+ "sourceRoot": "",
4
+ "sources": [
5
+ "../scss/modules/_typography.scss",
6
+ "../scss/variables/_typography.scss",
7
+ "../scss/variables/_base_colors.scss",
8
+ "../scss/variables/_spacing.scss",
9
+ "../scss/modules/_colors.scss",
10
+ "../scss/modules/_app.scss",
11
+ "../scss/modules/_base_colors.scss",
12
+ "../scss/modules/_button.scss",
13
+ "../scss/variables/_button.scss",
14
+ "../scss/modules/_link.scss",
15
+ "../scss/modules/_misc.scss",
16
+ "../scss/modules/_spacing.scss",
17
+ "../scss/modules/_token.scss",
18
+ "../scss/theme.scss"
19
+ ],
20
+ "names": [],
21
+ "mappings": "AAGA,iGACC,YCFgB,0CDGhB,UCDsB,KDEtB,MEWU,KFRX,iDAEC,YCTgB,0CDUhB,UCNwB,KDOxB,MEES,QFCV,uDACC,YCdsB,2DDetB,UCVsB,KDWtB,YCVwB,QDWxB,MEJa,KFOd,mCAGC,eGxBmB,yCCCnB,WFSa,QENd,+BACC,WFIU,KGRX,iBAIC,SACA,eCLD,QACC,yBAGD,mBACC,oCAGD,WACC,yBAGD,sBACC,oCAGD,WACC,sBAGD,sBACC,iCAGD,eACC,yBAGD,0BACC,oCAGD,UACC,yBAGD,qBACC,oCAGD,SACC,yBAGD,oBACC,oCAGD,cACC,yBAGD,yBACC,oCAGD,SACC,yBAGD,oBACC,oCAGD,SACC,yBAGD,oBACC,oCAGD,WACC,yBAGD,sBACC,oCAGD,UACC,yBAGD,qBACC,oCAGD,UACC,sBAGD,qBACC,iCAGD,aACC,yBAGD,wBACC,oCAGD,cACC,yBAGD,yBACC,oCAGD,WACC,sBAGD,sBACC,iCAGD,SACC,yBAGD,oBACC,oCAGD,aACC,sBAGD,wBACC,iCAGD,UACC,sBAGD,qBACC,iCAGD,6BACC,sBAGD,wCACC,iCAGD,gCACC,yBAGD,2CACC,oCAGD,8BACC,yBAGD,yCACC,oCCrKD,qCACC,WCDsB,mBDEtB,MLES,QKDT,YACA,aACA,eACA,YACA,eAEA,uDACC,WCT2B,oBDW5B,uDACC,WCX2B,oBDa5B,0DACC,WCb4B,oBDgB7B,6DACC,WLhBQ,QKiBR,MLbS,KKeT,+EACC,WCjBkC,QDmBnC,+EACC,WCnBkC,QDqBnC,kFACC,WCrBmC,QJVtC,oCACC,WFSa,QENd,+BACC,WFIU,KFRX,iGACC,YCFgB,0CDGhB,UCDsB,KDEtB,MEWU,KFRX,iDAEC,YCTgB,0CDUhB,UCNwB,KDOxB,MEES,QFCV,uDACC,YCdsB,2DDetB,UCVsB,KDWtB,YCVwB,QDWxB,MEJa,KFOd,mCAGC,eGxBmB,qBMGnB,qBAEA,4BACC,0BLNF,oCACC,WFSa,QENd,+BACC,WFIU,KQTX,sBACC,WRUc,QQTd,WCFD,iBACC,QRHiB,IQKlB,gBACC,ORNiB,IQSlB,kBACC,QRTkB,IQWnB,iBACC,ORZkB,IQenB,mBACC,QRfmB,KQiBpB,kBACC,ORlBmB,KQqBpB,0BACC,QRrBkB,KQuBnB,iBACC,ORxBkB,yBSClB,aACA,eAGD,UACC,YACA,uBACA,cACA,mBACA,aACA,mBZXD,iGACC,YCFgB,0CDGhB,UCDsB,KDEtB,MEWU,KFRX,iDAEC,YCTgB,0CDUhB,UCNwB,KDOxB,MEES,QFCV,uDACC,YCdsB,2DDetB,UCVsB,KDWtB,YCVwB,QDWxB,MEJa,KFOd,mCAGC,eGxBmB,KUKpB,GAGC,SACA,UAGD,eAOC,SAGD,MAGC,cAOD,MAGC,SAQD,GAGC,aACA,YAGD,QAIC,SAGD,+CAIC,WXpDU,KWqDV,WACA,YACA,gCACA,cVlEkB,IUmElB,gBACA,mBAEA,iEACC,gCACA,aACA,mBAED,4FACC,iCACA,mBAED,6EACC,iCACA,mBAED,0EACC,iCACA,WX3ES,KW+EX,SACC,uBACA,YACA",
22
+ "sourcesContent": [
23
+ "@import \"../variables/typography\";\n@import \"../variables/spacing\";\n\n.sd-primary-text {\n\tfont-family: $sd-font-family;\n\tfont-size: $sd-primary-font-size;\n\tcolor: $sd-primary-text-color;\n}\n\n.sd-secondary-text,\n.sd-field-caption {\n\tfont-family: $sd-font-family;\n\tfont-size: $sd-secondary-font-size;\n\tcolor: $sd-secondary-text-color;\n}\n\n.sd-heading-text {\n\tfont-family: $sd-font-family-light;\n\tfont-size: $sd-heading-font-size;\n\tfont-weight: $sd-heading-font-weight;\n\tcolor: $sd-heading-text-color;\n}\n\n.sd-content-heading {\n\t@extend .sd-heading-text;\n\n\tpadding-bottom: $sd-normal-spacing;\n}\n",
24
+ "@import \"./colors\";\n\n$sd-font-family: \"Segoe UI\", \"Lucida Sans\", Arial, sans-serif !default;\n$sd-font-family-light: \"Segoe UI Light\", \"Segoe UI\", \"Lucida Sans\", Arial, sans-serif !default;\n$sd-primary-font-size: 16px !default;\n$sd-primary-text-color: $sd-black !default;\n$sd-secondary-font-size: 13px !default;\n$sd-secondary-text-color: $sd-grey !default;\n$sd-heading-font-size: 24px !default;\n$sd-heading-font-weight: lighter !default;\n$sd-heading-text-color: $sd-darkgrey !default;\n",
25
+ "$sd-red: #cc0017;\n$sd-orange: #ff6b11;\n$sd-yellow: #ffbb11;\n$sd-lightgreen: #8abd0c;\n$sd-green: #009621;\n$sd-teal: #0099c5;\n$sd-lightblue: #0d98ff;\n$sd-blue: #1467ba;\n$sd-pink: #c41579;\n$sd-purple: #6c127b;\n$sd-brown: #593b20;\n$sd-white: #fff;\n$sd-palegrey: #f2f2f2;\n$sd-lightgrey: #d9d9d9;\n$sd-silver: #ccc;\n$sd-grey: #767676;\n$sd-darkgrey: #555;\n$sd-black: #111;\n\n$field-validation-warn-color: #555555;\n$field-validation-suggest-color: #bf8800;\n$field-validation-error-color: #cc0017;\n",
26
+ "$sd-tiny-spacing: 4px !default;\n$sd-small-spacing: 8px !default;\n$sd-normal-spacing: 16px !default;\n$sd-large-spacing: 24px !default;\n",
27
+ "@import \"../variables/colors\";\n\n.sd-app-background {\n\tbackground: $sd-app-background;\n}\n\n.sd-content-background {\n\tbackground: $sd-content-background;\n}\n",
28
+ "@import \"typography\";\n@import \"colors\";\n\n.sd-web-app {\n\t@extend .sd-primary-text;\n\t@extend .sd-app-background;\n\n\tmargin: 0;\n\tcursor: default;\n}\n",
29
+ "/* Generated by 'generate-colors-scss.js', do not touch */\n@import \"../variables/base_colors\";\n\n.sd-red {\n\tcolor: $sd-red !important;\n}\n\n.sd-red-background {\n\tbackground-color: $sd-red !important;\n}\n\n.sd-orange {\n\tcolor: $sd-orange !important;\n}\n\n.sd-orange-background {\n\tbackground-color: $sd-orange !important;\n}\n\n.sd-yellow {\n\tcolor: $sd-yellow !important;\n}\n\n.sd-yellow-background {\n\tbackground-color: $sd-yellow !important;\n}\n\n.sd-lightgreen {\n\tcolor: $sd-lightgreen !important;\n}\n\n.sd-lightgreen-background {\n\tbackground-color: $sd-lightgreen !important;\n}\n\n.sd-green {\n\tcolor: $sd-green !important;\n}\n\n.sd-green-background {\n\tbackground-color: $sd-green !important;\n}\n\n.sd-teal {\n\tcolor: $sd-teal !important;\n}\n\n.sd-teal-background {\n\tbackground-color: $sd-teal !important;\n}\n\n.sd-lightblue {\n\tcolor: $sd-lightblue !important;\n}\n\n.sd-lightblue-background {\n\tbackground-color: $sd-lightblue !important;\n}\n\n.sd-blue {\n\tcolor: $sd-blue !important;\n}\n\n.sd-blue-background {\n\tbackground-color: $sd-blue !important;\n}\n\n.sd-pink {\n\tcolor: $sd-pink !important;\n}\n\n.sd-pink-background {\n\tbackground-color: $sd-pink !important;\n}\n\n.sd-purple {\n\tcolor: $sd-purple !important;\n}\n\n.sd-purple-background {\n\tbackground-color: $sd-purple !important;\n}\n\n.sd-brown {\n\tcolor: $sd-brown !important;\n}\n\n.sd-brown-background {\n\tbackground-color: $sd-brown !important;\n}\n\n.sd-white {\n\tcolor: $sd-white !important;\n}\n\n.sd-white-background {\n\tbackground-color: $sd-white !important;\n}\n\n.sd-palegrey {\n\tcolor: $sd-palegrey !important;\n}\n\n.sd-palegrey-background {\n\tbackground-color: $sd-palegrey !important;\n}\n\n.sd-lightgrey {\n\tcolor: $sd-lightgrey !important;\n}\n\n.sd-lightgrey-background {\n\tbackground-color: $sd-lightgrey !important;\n}\n\n.sd-silver {\n\tcolor: $sd-silver !important;\n}\n\n.sd-silver-background {\n\tbackground-color: $sd-silver !important;\n}\n\n.sd-grey {\n\tcolor: $sd-grey !important;\n}\n\n.sd-grey-background {\n\tbackground-color: $sd-grey !important;\n}\n\n.sd-darkgrey {\n\tcolor: $sd-darkgrey !important;\n}\n\n.sd-darkgrey-background {\n\tbackground-color: $sd-darkgrey !important;\n}\n\n.sd-black {\n\tcolor: $sd-black !important;\n}\n\n.sd-black-background {\n\tbackground-color: $sd-black !important;\n}\n\n.field-validation-warn-color {\n\tcolor: $field-validation-warn-color !important;\n}\n\n.field-validation-warn-color-background {\n\tbackground-color: $field-validation-warn-color !important;\n}\n\n.field-validation-suggest-color {\n\tcolor: $field-validation-suggest-color !important;\n}\n\n.field-validation-suggest-color-background {\n\tbackground-color: $field-validation-suggest-color !important;\n}\n\n.field-validation-error-color {\n\tcolor: $field-validation-error-color !important;\n}\n\n.field-validation-error-color-background {\n\tbackground-color: $field-validation-error-color !important;\n}\n",
30
+ "@import \"../variables/button\";\n@import \"../variables/spacing\";\n\n.sd-button {\n\tbackground: $sd-button-background;\n\tcolor: $sd-button-color;\n\tborder: none;\n\toutline: none;\n\tpadding: 0 $sd-normal-spacing;\n\theight: 32px;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground: $sd-button-hover-background;\n\t}\n\t&:focus {\n\t\tbackground: $sd-button-focus-background;\n\t}\n\t&:active {\n\t\tbackground: $sd-button-active-background;\n\t}\n\n\t&.primary {\n\t\tbackground: $sd-primary-button-background;\n\t\tcolor: $sd-primary-button-color;\n\n\t\t&:hover {\n\t\t\tbackground: $sd-primary-button-hover-background;\n\t\t}\n\t\t&:focus {\n\t\t\tbackground: $sd-primary-button-focus-background;\n\t\t}\n\t\t&:active {\n\t\t\tbackground: $sd-primary-button-active-background;\n\t\t}\n\t}\n}\n",
31
+ "@import \"colors\";\n\n$sd-button-color: $sd-interaction-color !default;\n$sd-button-background: rgba($sd-button-color, 0) !default; /* Transparent */\n$sd-button-hover-background: mix($sd-button-color, $sd-button-background, 10%);\n$sd-button-focus-background: mix($sd-button-color, $sd-button-background, 10%);\n$sd-button-active-background: mix($sd-button-color, $sd-button-background, 20%);\n\n$sd-primary-button-color: $sd-white !default;\n$sd-primary-button-background: $sd-button-color !default;\n$sd-primary-button-hover-background: mix($sd-primary-button-color, $sd-primary-button-background, 10%);\n$sd-primary-button-focus-background: mix($sd-primary-button-color, $sd-primary-button-background, 10%);\n$sd-primary-button-active-background: mix($sd-primary-button-color, $sd-primary-button-background, 20%);\n",
32
+ "@import \"./typography\";\n\n.sd-hyperlink {\n\t@extend .sd-primary-text;\n\n\ttext-decoration: none;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t}\n}\n",
33
+ "@import \"colors\";\n\n.sd-separator-line {\n\tbackground: $sd-separator-color;\n\theight: 1px;\n}\n",
34
+ "@import \"../variables/spacing\";\n\n.sd-tiny-padding {\n\tpadding: $sd-tiny-spacing;\n}\n.sd-tiny-margin {\n\tmargin: $sd-tiny-spacing;\n}\n\n.sd-small-padding {\n\tpadding: $sd-small-spacing;\n}\n.sd-small-margin {\n\tmargin: $sd-small-spacing;\n}\n\n.sd-normal-padding {\n\tpadding: $sd-normal-spacing;\n}\n.sd-normal-margin {\n\tmargin: $sd-normal-spacing;\n}\n\n.sd-large-padding {\n\tpadding: $sd-large-spacing;\n}\n.sd-large-margin {\n\tmargin: $sd-large-spacing;\n}\n",
35
+ "@import \"../variables/base_colors\";\n@import \"../variables/spacing\";\n\n.sd-token-container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n\n.sd-token {\n\theight: 28px;\n\tmargin: $sd-tiny-spacing $sd-small-spacing $sd-tiny-spacing 0px;\n\tpadding: 0 $sd-small-spacing;\n\tbackground: $sd-palegrey;\n\tdisplay: flex;\n\talign-items: center;\n}\n",
36
+ "@import \"./variables/index\";\n@import \"./modules/index\";\n\nbody {\n\t@extend .sd-web-app;\n}\n\nh1 {\n\t@extend .sd-heading-text;\n\n\tmargin: 0;\n\tpadding: 0;\n}\n\nh2,\nh3,\nh4,\nh5,\nh6 {\n\t@extend .sd-content-heading;\n\n\tmargin: 0;\n}\n\nlabel {\n\t@extend .sd-field-caption;\n\n\tdisplay: block;\n}\n\na {\n\t@extend .sd-hyperlink;\n}\n\nsmall {\n\t@extend .sd-secondary-text;\n\n\tmargin: 0;\n}\n\nbutton,\ninput[type=\"button\"] {\n\t@extend .sd-button;\n}\n\nhr {\n\t@extend .sd-separator-line;\n\n\tmargin: $sd-tiny-spacing 0;\n\tborder: none;\n}\n\nsection {\n\t@extend .sd-content-background;\n\t@extend .sd-large-padding;\n\n\tmargin: 0;\n}\n\ninput[type=\"text\"],\ninput[type=\"password\"],\ntextarea {\n\t@extend .sd-primary-text;\n\tbackground: $sd-content-background;\n\twidth: 100%;\n\tborder: none;\n\tborder-bottom: 1px solid $sd-field-underline-color;\n\tmargin-bottom: $sd-small-spacing; // Give space for the underline\n\tpadding-top: 2px;\n\tpadding-bottom: 2px + 1px; // Give space for the focus underline\n\n\t&:focus {\n\t\tborder-bottom: 2px solid $sd-interaction-color;\n\t\toutline: none;\n\t\tpadding-bottom: 2px;\n\t}\n\t&:-moz-read-only {\n\t\tborder-bottom: 1px dashed $sd-field-underline-color;\n\t\tpadding-bottom: 2px + 1px; // Give space for the focus underline\n\t}\n\t&:read-only {\n\t\tborder-bottom: 1px dashed $sd-field-underline-color;\n\t\tpadding-bottom: 2px + 1px; // Give space for the focus underline\n\t}\n\t&:disabled {\n\t\tborder-bottom: 1px dashed $sd-field-underline-color;\n\t\tbackground: $sd-content-background;\n\t}\n}\n\ntextarea {\n\tbox-sizing: content-box;\n\tresize: none;\n\theight: 120px;\n}\n"
37
+ ]
38
+ }
package/npm-third-party-licenses.json ADDED
@@ -0,0 +1,187 @@
1
+ {
2
+ "@cypress/vite-dev-server@5.0.7": {
3
+ "licenses": "MIT",
4
+ "repository": "https://github.com/cypress-io/cypress",
5
+ "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
6
+ },
7
+ "@rollup/plugin-node-resolve@15.2.3": {
8
+ "licenses": "MIT",
9
+ "repository": "https://github.com/rollup/plugins",
10
+ "licenseUrl": "https://github.com/rollup/plugins/raw/HEAD/LICENSE"
11
+ },
12
+ "@types/node@20.10.6": {
13
+ "licenses": "MIT",
14
+ "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
15
+ "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
16
+ },
17
+ "@types/postcss-prefix-selector@1.16.3": {
18
+ "licenses": "MIT",
19
+ "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
20
+ "licenseUrl": "https://github.com/DefinitelyTyped/DefinitelyTyped/raw/HEAD/LICENSE"
21
+ },
22
+ "@typescript-eslint/eslint-plugin@6.17.0": {
23
+ "licenses": "MIT",
24
+ "repository": "https://github.com/typescript-eslint/typescript-eslint",
25
+ "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
26
+ },
27
+ "@typescript-eslint/parser@6.17.0": {
28
+ "licenses": "BSD-2-Clause",
29
+ "repository": "https://github.com/typescript-eslint/typescript-eslint",
30
+ "licenseUrl": "https://github.com/typescript-eslint/typescript-eslint/raw/HEAD/LICENSE"
31
+ },
32
+ "@vitest/coverage-v8@1.1.1": {
33
+ "licenses": "MIT",
34
+ "repository": "https://github.com/vitest-dev/vitest",
35
+ "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
36
+ },
37
+ "@vitest/ui@1.1.1": {
38
+ "licenses": "MIT",
39
+ "repository": "https://github.com/vitest-dev/vitest",
40
+ "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE"
41
+ },
42
+ "axe-core@4.8.3": {
43
+ "licenses": "MPL-2.0",
44
+ "repository": "https://github.com/dequelabs/axe-core",
45
+ "licenseUrl": "https://github.com/dequelabs/axe-core/raw/HEAD/LICENSE"
46
+ },
47
+ "cypress-axe@1.5.0": {
48
+ "licenses": "MIT",
49
+ "repository": "https://github.com/component-driven/cypress-axe",
50
+ "licenseUrl": "https://github.com/component-driven/cypress-axe/raw/HEAD/License.md"
51
+ },
52
+ "cypress-real-events@1.13.0": {
53
+ "licenses": "MIT",
54
+ "repository": "https://github.com/dmtrKovalenko/cypress-real-events",
55
+ "licenseUrl": "https://github.com/dmtrKovalenko/cypress-real-events"
56
+ },
57
+ "cypress@13.6.2": {
58
+ "licenses": "MIT",
59
+ "repository": "https://github.com/cypress-io/cypress",
60
+ "licenseUrl": "https://cypress.io"
61
+ },
62
+ "esbuild@0.19.11": {
63
+ "licenses": "MIT",
64
+ "repository": "https://github.com/evanw/esbuild",
65
+ "licenseUrl": "https://github.com/evanw/esbuild/raw/HEAD/LICENSE.md"
66
+ },
67
+ "eslint-config-google@0.14.0": {
68
+ "licenses": "Apache-2.0",
69
+ "repository": "https://github.com/google/eslint-config-google",
70
+ "licenseUrl": "https://github.com/google/eslint-config-google/raw/HEAD/LICENSE"
71
+ },
72
+ "eslint-config-prettier@9.1.0": {
73
+ "licenses": "MIT",
74
+ "repository": "https://github.com/prettier/eslint-config-prettier",
75
+ "licenseUrl": "https://github.com/prettier/eslint-config-prettier/raw/HEAD/LICENSE"
76
+ },
77
+ "eslint@8.56.0": {
78
+ "licenses": "MIT",
79
+ "repository": "https://github.com/eslint/eslint",
80
+ "licenseUrl": "https://github.com/eslint/eslint/raw/HEAD/LICENSE"
81
+ },
82
+ "github-markdown-css@5.5.0": {
83
+ "licenses": "MIT",
84
+ "repository": "https://github.com/sindresorhus/github-markdown-css",
85
+ "licenseUrl": "https://github.com/sindresorhus/github-markdown-css/raw/HEAD/license"
86
+ },
87
+ "highlight.js@11.9.0": {
88
+ "licenses": "BSD-3-Clause",
89
+ "repository": "https://github.com/highlightjs/highlight.js",
90
+ "licenseUrl": "https://github.com/highlightjs/highlight.js/raw/HEAD/LICENSE"
91
+ },
92
+ "junit-report-builder@3.1.0": {
93
+ "licenses": "MIT",
94
+ "repository": "https://github.com/davidparsson/junit-report-builder",
95
+ "licenseUrl": "https://github.com/davidparsson/junit-report-builder/raw/HEAD/LICENSE"
96
+ },
97
+ "lint-staged@15.2.0": {
98
+ "licenses": "MIT",
99
+ "repository": "https://github.com/okonet/lint-staged",
100
+ "licenseUrl": "https://github.com/okonet/lint-staged/raw/HEAD/LICENSE"
101
+ },
102
+ "marked@11.1.1": {
103
+ "licenses": "MIT",
104
+ "repository": "https://github.com/markedjs/marked",
105
+ "licenseUrl": "https://github.com/markedjs/marked/raw/HEAD/LICENSE.md"
106
+ },
107
+ "postcss-prefix-selector@1.16.0": {
108
+ "licenses": "MIT",
109
+ "repository": "https://github.com/RadValentin/postcss-prefix-selector",
110
+ "licenseUrl": "https://github.com/RadValentin/postcss-prefix-selector/raw/HEAD/LICENSE"
111
+ },
112
+ "postcss@8.4.32": {
113
+ "licenses": "MIT",
114
+ "repository": "https://github.com/postcss/postcss",
115
+ "licenseUrl": "https://github.com/postcss/postcss/raw/HEAD/LICENSE"
116
+ },
117
+ "prettier@3.1.1": {
118
+ "licenses": "MIT",
119
+ "repository": "https://github.com/prettier/prettier",
120
+ "licenseUrl": "https://github.com/prettier/prettier/raw/HEAD/LICENSE"
121
+ },
122
+ "resolve-pkg@2.0.0": {
123
+ "licenses": "MIT",
124
+ "repository": "https://github.com/sindresorhus/resolve-pkg",
125
+ "licenseUrl": "https://github.com/sindresorhus/resolve-pkg/raw/HEAD/license"
126
+ },
127
+ "sass@1.69.6": {
128
+ "licenses": "MIT",
129
+ "repository": "https://github.com/sass/dart-sass",
130
+ "licenseUrl": "https://github.com/sass/dart-sass/raw/HEAD/LICENSE"
131
+ },
132
+ "stylelint-config-recommended-scss@14.0.0": {
133
+ "licenses": "MIT",
134
+ "repository": "https://github.com/stylelint-scss/stylelint-config-recommended-scss",
135
+ "licenseUrl": "https://github.com/stylelint-scss/stylelint-config-recommended-scss/raw/HEAD/LICENSE"
136
+ },
137
+ "stylelint-config-standard@36.0.0": {
138
+ "licenses": "MIT",
139
+ "repository": "https://github.com/stylelint/stylelint-config-standard",
140
+ "licenseUrl": "https://github.com/stylelint/stylelint-config-standard/raw/HEAD/LICENSE"
141
+ },
142
+ "stylelint-scss@6.0.0": {
143
+ "licenses": "MIT",
144
+ "repository": "https://github.com/stylelint-scss/stylelint-scss",
145
+ "licenseUrl": "https://github.com/stylelint-scss/stylelint-scss/raw/HEAD/LICENSE"
146
+ },
147
+ "stylelint@16.1.0": {
148
+ "licenses": "MIT",
149
+ "repository": "https://github.com/stylelint/stylelint",
150
+ "licenseUrl": "https://github.com/stylelint/stylelint/raw/HEAD/LICENSE"
151
+ },
152
+ "tsup@8.0.1": {
153
+ "licenses": "MIT",
154
+ "repository": "https://github.com/egoist/tsup",
155
+ "licenseUrl": "https://github.com/egoist/tsup/raw/HEAD/LICENSE"
156
+ },
157
+ "turbo@1.11.2": {
158
+ "licenses": "MPL-2.0",
159
+ "repository": "https://github.com/vercel/turbo",
160
+ "licenseUrl": "https://github.com/vercel/turbo/raw/HEAD/LICENSE"
161
+ },
162
+ "typescript@5.3.3": {
163
+ "licenses": "Apache-2.0",
164
+ "repository": "https://github.com/Microsoft/TypeScript",
165
+ "licenseUrl": "https://github.com/Microsoft/TypeScript/raw/HEAD/LICENSE.txt"
166
+ },
167
+ "vite-tsconfig-paths@4.2.3": {
168
+ "licenses": "MIT",
169
+ "repository": "https://github.com/aleclarson/vite-tsconfig-paths",
170
+ "licenseUrl": "https://github.com/aleclarson/vite-tsconfig-paths/raw/HEAD/LICENSE"
171
+ },
172
+ "vite@5.0.10": {
173
+ "licenses": "MIT",
174
+ "repository": "https://github.com/vitejs/vite",
175
+ "licenseUrl": "https://github.com/vitejs/vite/raw/HEAD/LICENSE.md"
176
+ },
177
+ "vitest@1.1.1": {
178
+ "licenses": "MIT",
179
+ "repository": "https://github.com/vitest-dev/vitest",
180
+ "licenseUrl": "https://github.com/vitest-dev/vitest/raw/HEAD/LICENSE.md"
181
+ },
182
+ "yargs@17.7.2": {
183
+ "licenses": "MIT",
184
+ "repository": "https://github.com/yargs/yargs",
185
+ "licenseUrl": "https://github.com/yargs/yargs/raw/HEAD/LICENSE"
186
+ }
187
+ }
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "@cas-smartdesign/styles",
3
+ "version": "3.6.1",
4
+ "description": "A shared package providing style variables and basic style sheets to create SmartDesign like components and apps.",
5
+ "license": "SEE LICENSE IN LICENSE",
6
+ "devDependencies": {
7
+ "sass": "^1.69.6",
8
+ "@cas-smartdesign/element-preview": "^0.2.1",
9
+ "@cas-smartdesign/license-generator": "^1.6.1"
10
+ },
11
+ "files": [
12
+ "dist/docs/*",
13
+ "dist/*.css",
14
+ "dist/*.css.map",
15
+ "scss",
16
+ "npm-third-party-licenses.json"
17
+ ],
18
+ "publishConfig": {
19
+ "registry": "https://registry.npmjs.org/",
20
+ "access": "public"
21
+ },
22
+ "scripts": {
23
+ "version": "pnpm version",
24
+ "generate-colors": "node ./build-tools/generate-colors-scss.js",
25
+ "dev": "pnpm generate-colors && vite",
26
+ "watch": "pnpm generate-colors && vite --watch",
27
+ "build:no-license": "pnpm generate-colors && vite build && vite build --mode documentation",
28
+ "build": "pnpm generate-license && pnpm build:no-license",
29
+ "generate-license": "sd-license-generator --r ../"
30
+ }
31
+ }
package/readme.md ADDED
@@ -0,0 +1,59 @@
1
+ # @cas-smartdesign/styles
2
+
3
+ A shared package providing style variables and basic style sheets to create SmartDesign like components and apps.
4
+
5
+ ## Entry points and bundles
6
+
7
+ The package has two main SCSS files and two corresponding CSS bundles.
8
+
9
+ - scss/styles.scss (compiled to dist/styles.css)
10
+ - scss/theme.scss (compiled to dist/theme.css)
11
+
12
+ ### Styles bundle
13
+
14
+ Contains prefixed class rules that can be added to your components to make them fit into SmartDesign.
15
+
16
+ In order to make use of the predefined variables (e.g. colors or spacings) in your components we recommend to
17
+ use the styles.scss file or the module SCSS files and include it in your build process.
18
+
19
+ ### Theme bundle
20
+
21
+ The theme bundle contains every rule that is contained in the styles and also defines rules to some standard HTML
22
+ tags that makes it easier to style a simple page.
23
+
24
+ Note that as it can modify the look and feel of other components we don't recommend this to be used on complex
25
+ apps that also use third party elements.
26
+
27
+ ## SCSS structure
28
+
29
+ Beside the main files every SCSS file is declared as partial and they are organized in two folders:
30
+
31
+ ### Variables (scss/variables)
32
+
33
+ Files in this folder contain shared variables that are used for components or other modules.
34
+
35
+ ### Modules (scss/modules)
36
+
37
+ Files in this folder contain rules that are specific for a topic or component.
38
+
39
+ | Module | Description |
40
+ | :---------: | ---------------------------------------------------------------------- |
41
+ | app | Defines the most basic styles |
42
+ | base_colors | Defines auto generated classed to change the color of a single element |
43
+ | button | Defines rules for button-like elements |
44
+ | colors | Defines classes for SmartDesign specific colors (mostly backgrounds) |
45
+ | link | Defines rules for hyperlink-like elements |
46
+ | misc | Defines rules for the simplest components |
47
+ | spacing | Defines classes for setting pre-defined margin and padding values |
48
+ | typography | Defines classes for setting pre-defined typography values |
49
+
50
+ ## Styling guidelines
51
+
52
+ - Every rule should behave the same in all the supported browsers
53
+ - Always use the "sd-" prefix for class names
54
+ - Beside the theme bundle, avoid changing default HTML styles
55
+ - Only use !important keyword for very specific rules (e.g. sd-hidden, sd-red)
56
+ - A variable file must not reference to files outside the variables folder (e.g. the modules folder)
57
+ - A module file can use other modules and variables, but dependencies should be imported explicitly
58
+
59
+ ## Examples
package/scss/modules/_app.scss ADDED
@@ -0,0 +1,10 @@
1
+ @import "typography";
2
+ @import "colors";
3
+
4
+ .sd-web-app {
5
+ @extend .sd-primary-text;
6
+ @extend .sd-app-background;
7
+
8
+ margin: 0;
9
+ cursor: default;
10
+ }
package/scss/modules/_base_colors.scss ADDED
@@ -0,0 +1,170 @@
1
+ /* Generated by 'generate-colors-scss.js', do not touch */
2
+ @import "../variables/base_colors";
3
+
4
+ .sd-red {
5
+ color: $sd-red !important;
6
+ }
7
+
8
+ .sd-red-background {
9
+ background-color: $sd-red !important;
10
+ }
11
+
12
+ .sd-orange {
13
+ color: $sd-orange !important;
14
+ }
15
+
16
+ .sd-orange-background {
17
+ background-color: $sd-orange !important;
18
+ }
19
+
20
+ .sd-yellow {
21
+ color: $sd-yellow !important;
22
+ }
23
+
24
+ .sd-yellow-background {
25
+ background-color: $sd-yellow !important;
26
+ }
27
+
28
+ .sd-lightgreen {
29
+ color: $sd-lightgreen !important;
30
+ }
31
+
32
+ .sd-lightgreen-background {
33
+ background-color: $sd-lightgreen !important;
34
+ }
35
+
36
+ .sd-green {
37
+ color: $sd-green !important;
38
+ }
39
+
40
+ .sd-green-background {
41
+ background-color: $sd-green !important;
42
+ }
43
+
44
+ .sd-teal {
45
+ color: $sd-teal !important;
46
+ }
47
+
48
+ .sd-teal-background {
49
+ background-color: $sd-teal !important;
50
+ }
51
+
52
+ .sd-lightblue {
53
+ color: $sd-lightblue !important;
54
+ }
55
+
56
+ .sd-lightblue-background {
57
+ background-color: $sd-lightblue !important;
58
+ }
59
+
60
+ .sd-blue {
61
+ color: $sd-blue !important;
62
+ }
63
+
64
+ .sd-blue-background {
65
+ background-color: $sd-blue !important;
66
+ }
67
+
68
+ .sd-pink {
69
+ color: $sd-pink !important;
70
+ }
71
+
72
+ .sd-pink-background {
73
+ background-color: $sd-pink !important;
74
+ }
75
+
76
+ .sd-purple {
77
+ color: $sd-purple !important;
78
+ }
79
+
80
+ .sd-purple-background {
81
+ background-color: $sd-purple !important;
82
+ }
83
+
84
+ .sd-brown {
85
+ color: $sd-brown !important;
86
+ }
87
+
88
+ .sd-brown-background {
89
+ background-color: $sd-brown !important;
90
+ }
91
+
92
+ .sd-white {
93
+ color: $sd-white !important;
94
+ }
95
+
96
+ .sd-white-background {
97
+ background-color: $sd-white !important;
98
+ }
99
+
100
+ .sd-palegrey {
101
+ color: $sd-palegrey !important;
102
+ }
103
+
104
+ .sd-palegrey-background {
105
+ background-color: $sd-palegrey !important;
106
+ }
107
+
108
+ .sd-lightgrey {
109
+ color: $sd-lightgrey !important;
110
+ }
111
+
112
+ .sd-lightgrey-background {
113
+ background-color: $sd-lightgrey !important;
114
+ }
115
+
116
+ .sd-silver {
117
+ color: $sd-silver !important;
118
+ }
119
+
120
+ .sd-silver-background {
121
+ background-color: $sd-silver !important;
122
+ }
123
+
124
+ .sd-grey {
125
+ color: $sd-grey !important;
126
+ }
127
+
128
+ .sd-grey-background {
129
+ background-color: $sd-grey !important;
130
+ }
131
+
132
+ .sd-darkgrey {
133
+ color: $sd-darkgrey !important;
134
+ }
135
+
136
+ .sd-darkgrey-background {
137
+ background-color: $sd-darkgrey !important;
138
+ }
139
+
140
+ .sd-black {
141
+ color: $sd-black !important;
142
+ }
143
+
144
+ .sd-black-background {
145
+ background-color: $sd-black !important;
146
+ }
147
+
148
+ .field-validation-warn-color {
149
+ color: $field-validation-warn-color !important;
150
+ }
151
+
152
+ .field-validation-warn-color-background {
153
+ background-color: $field-validation-warn-color !important;
154
+ }
155
+
156
+ .field-validation-suggest-color {
157
+ color: $field-validation-suggest-color !important;
158
+ }
159
+
160
+ .field-validation-suggest-color-background {
161
+ background-color: $field-validation-suggest-color !important;
162
+ }
163
+
164
+ .field-validation-error-color {
165
+ color: $field-validation-error-color !important;
166
+ }
167
+
168
+ .field-validation-error-color-background {
169
+ background-color: $field-validation-error-color !important;
170
+ }