sprintify-ui 0.0.9 → 0.0.10

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 (9) hide show
  1. package/README.md +14 -3
  2. package/dist/style.css +1 -1
  3. package/dist/tailwindcss/index.js +260 -32
  4. package/package.json +1 -1
  5. package/src/assets/form.css +1 -10
  6. package/src/assets/main.css +0 -1
  7. package/src/assets/tailwind.css +3 -5
  8. package/src/components/BaseButton.stories.js +11 -3
  9. package/src/assets/button.css +0 -80
package/README.md CHANGED
@@ -5,7 +5,8 @@
5
5
  </p>
6
6
 
7
7
  <p align="center">
8
- <img src="https://api.netlify.com/api/v1/badges/e95b44db-1c89-450d-99e1-887c9b261438/deploy-status" />
8
+ <a href="https://badge.fury.io/js/sprintify-ui"><img src="https://badge.fury.io/js/sprintify-ui.svg" alt="npm version" height="18"></a>
9
+ <img src="https://api.netlify.com/api/v1/badges/e95b44db-1c89-450d-99e1-887c9b261438/deploy-status" height="18" />
9
10
  </p>
10
11
 
11
12
  ## About Sprintify UI
@@ -18,6 +19,12 @@ https://sprintify-ui-storybook.netlify.app
18
19
 
19
20
  ## Getting started
20
21
 
22
+ ### Install
23
+
24
+ ```bash
25
+ npm i sprintify-ui --save
26
+ ```
27
+
21
28
  ### Peer dependencies:
22
29
 
23
30
  `sprintify-ui` is highly opinionated and requires multiple dependencies :
@@ -44,6 +51,7 @@ npm i @vueuse/core axios lodash luxon pinia qs tailwindcss vue vue-18n vue-route
44
51
  ```ts
45
52
  import axios from "axios";
46
53
  import { createI18n } from "vue-i18n";
54
+ import { createPinia } from "pinia";
47
55
  import { createRouter, createWebHistory } from "vue-router";
48
56
  import SprintifyUI from "sprintify-ui";
49
57
 
@@ -69,8 +77,11 @@ const messages = {
69
77
  messages.en.sui = en.sui;
70
78
  messages.fr.sui = fr.sui;
71
79
 
72
- const i18n = createI18n({
80
+ type MessageSchema = typeof messages.en;
81
+
82
+ const i18n = createI18n<[MessageSchema], 'en' | 'fr', false>({
73
83
  locale: "en",
84
+ legacy: false,
74
85
  messages,
75
86
  });
76
87
 
@@ -135,7 +146,7 @@ plugins: [
135
146
  ],
136
147
  ```
137
148
 
138
- ## Configure using unplugin-vue-components
149
+ ### Configure using unplugin-vue-components
139
150
 
140
151
  Add a custom resolver
141
152
 
package/dist/style.css CHANGED
@@ -1,4 +1,4 @@
1
1
  @charset "UTF-8";.spinner[data-v-7d66ba2e]{animation:rotate-7d66ba2e 1s linear infinite;-webkit-animation:rotate-7d66ba2e 1s linear infinite;-moz-animation:rotate-7d66ba2e 1s linear infinite}@keyframes rotate-7d66ba2e{to{transform:rotate(360deg)}}.path[data-v-7d66ba2e]{stroke-dasharray:170;stroke-dashoffset:20}.th[data-v-c943591d]{background-color:rgb(248 250 252 / var(--tw-bg-opacity));position:sticky;top:0px;z-index:10;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: .75;--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}/*!
2
2
  * Pikaday
3
3
  * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
4
- */.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{position:relative;text-align:center}.pika-label{display:inline-block;position:relative;z-index:9999;overflow:hidden;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:700;background-color:#fff}.pika-title select{cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:5px;opacity:0}.pika-prev,.pika-next{display:block;cursor:pointer;position:relative;outline:none;border:0;padding:0;width:20px;height:30px;text-indent:20px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:75% 75%;opacity:.5}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-select{display:inline-block}.pika-table{width:100%;border-collapse:collapse;border-spacing:0;border:0}.pika-table th,.pika-table td{width:14.285714285714286%;padding:0}.pika-table th{color:#999;font-size:12px;line-height:25px;font-weight:700;text-align:center}.pika-button{cursor:pointer;display:block;box-sizing:border-box;-moz-box-sizing:border-box;outline:none;border:0;margin:0;width:100%;padding:5px;color:#666;font-size:12px;line-height:15px;text-align:right;background:#f5f5f5;height:initial}.pika-week{font-size:11px;color:#999}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;font-weight:700;background:#33aaff;box-shadow:inset 0 1px 3px #178fe5;border-radius:3px}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#D5E9F7}.is-startrange .pika-button{color:#fff;background:#6CB31D;box-shadow:none;border-radius:3px}.is-endrange .pika-button{color:#fff;background:#33aaff;box-shadow:none;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;background:#ff8000;box-shadow:none;border-radius:3px}.pika-table abbr{border-bottom:none;cursor:help}.pikaday-white{--backgroundColor: #ffffff;--textColor: #718096;--currentDateTextColor: #3182ce;--selectedDateBackgroundColor: #3182ce;--selectedDateTextColor: #ffffff;--labelTextColor: #4a5568;--weekDaysTextColor: #a0aec0;font-family:inherit;background-color:var(--backgroundColor);padding:.5rem;z-index:2000;margin:6px 0 0;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:.5rem}.pikaday-white .pika-title{width:100%;text-align:center;display:flex;justify-content:flex-start;margin-bottom:5px}.pikaday-white .pika-prev,.pikaday-white .pika-next{position:absolute;outline:none;padding:0;width:26px;height:26px;top:-1px;display:inline-block;margin-top:0;cursor:pointer;text-indent:-9999px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;opacity:.7}.pikaday-white .pika-prev:hover,.pikaday-white .pika-next:hover{opacity:1}.pikaday-white .pika-prev{right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E")}.pikaday-white .pika-next{right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E")}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pikaday-white .pika-label{margin-right:.375rem;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));padding:.25rem .5rem;font-size:14px;font-weight:500;line-height:1}.pikaday-white .pika-label{position:relative}.pikaday-white .pika-select-month,.pikaday-white .pika-select-year{width:100%;cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:0;opacity:0;padding:0}.pikaday-white table{width:100%;border-collapse:collapse}.pikaday-white table th{width:2em;height:2em;font-weight:400;color:var(--weekDaysTextColor);text-align:center}.pikaday-white table th abbr{text-decoration:none}.pikaday-white table td{padding:1px}.pikaday-white table td button{width:2em;height:2em;text-align:center;border-radius:9999px;background-color:var(--backgroundColor)}.pikaday-white table td button:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.pikaday-white table td.is-today button{color:var(--currentDateTextColor)}.pikaday-white table td.is-selected button{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-weight:400}.pikaday-white table td button{color:var(--textColor)}.btn{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:.375rem;border-width:1px;padding:.625rem 1rem;text-align:center;font-size:.875rem;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.btn:focus-visible{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 2px}.btn:disabled{cursor:not-allowed;opacity:.5}.btn{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-xs{padding:.25rem .5rem;font-size:.75rem;line-height:1rem}.btn.btn-sm{padding:.5rem .75rem;font-size:.875rem;line-height:1rem}.btn.btn-md{padding:.625rem 1rem;font-size:.875rem;line-height:1.25rem}.btn.btn-lg{padding:.75rem 1.25rem;font-size:1rem;line-height:1.5rem}.btn.btn-xl{padding:1rem 1.5rem;font-size:1rem;line-height:1.5rem}.btn-default{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn-default:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn-default:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn-default:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-primary{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn.btn-primary:hover{--tw-bg-opacity: 1;background-color:rgb(67 56 202 / var(--tw-bg-opacity))}.btn.btn-primary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-primary:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.btn.btn-secondary{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(199 210 254 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity))}.btn.btn-secondary:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-secondary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-secondary:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-secondary-outline{--tw-border-opacity: 1;border-color:rgb(129 140 248 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(199 210 254 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity))}.btn.btn-secondary-outline:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-secondary-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-secondary-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-slate-100{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.btn.btn-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.btn.btn-slate-100:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-100:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-100-outline{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.btn.btn-slate-100-outline:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-100-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-100-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-200{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity))}.btn.btn-slate-200:hover{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}.btn.btn-slate-200:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-200:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-200-outline{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity))}.btn.btn-slate-200-outline:hover{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}.btn.btn-slate-200-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-200-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-white{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn.btn-white:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn.btn-white:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-white:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-white-outline{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn.btn-white-outline:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn.btn-white-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-white-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-white-outline-primary{--tw-border-opacity: 1;border-color:rgb(129 140 248 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity))}.btn.btn-white-outline-primary:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-white-outline-primary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-white-outline-primary:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-black{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn.btn-black:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}.btn.btn-black:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity))}.btn.btn-black:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity))}.btn.btn-danger{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn.btn-danger:hover{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))}.btn.btn-danger:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity))}.btn.btn-danger:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.btn.btn-warning{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(250 204 21 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(113 63 18 / var(--tw-text-opacity))}.btn.btn-warning:hover{--tw-bg-opacity: 1;background-color:rgb(254 240 138 / var(--tw-bg-opacity))}.btn.btn-warning:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity))}.btn.btn-warning:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(253 224 71 / var(--tw-bg-opacity))}.form-input-label{display:block;font-size:.875rem;line-height:1.25rem;line-height:1.25;--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.form-input-error{font-size:.875rem;line-height:1.25rem;line-height:1.25;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}
4
+ */.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{position:relative;text-align:center}.pika-label{display:inline-block;position:relative;z-index:9999;overflow:hidden;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:700;background-color:#fff}.pika-title select{cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:5px;opacity:0}.pika-prev,.pika-next{display:block;cursor:pointer;position:relative;outline:none;border:0;padding:0;width:20px;height:30px;text-indent:20px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:75% 75%;opacity:.5}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-select{display:inline-block}.pika-table{width:100%;border-collapse:collapse;border-spacing:0;border:0}.pika-table th,.pika-table td{width:14.285714285714286%;padding:0}.pika-table th{color:#999;font-size:12px;line-height:25px;font-weight:700;text-align:center}.pika-button{cursor:pointer;display:block;box-sizing:border-box;-moz-box-sizing:border-box;outline:none;border:0;margin:0;width:100%;padding:5px;color:#666;font-size:12px;line-height:15px;text-align:right;background:#f5f5f5;height:initial}.pika-week{font-size:11px;color:#999}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;font-weight:700;background:#33aaff;box-shadow:inset 0 1px 3px #178fe5;border-radius:3px}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#D5E9F7}.is-startrange .pika-button{color:#fff;background:#6CB31D;box-shadow:none;border-radius:3px}.is-endrange .pika-button{color:#fff;background:#33aaff;box-shadow:none;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;background:#ff8000;box-shadow:none;border-radius:3px}.pika-table abbr{border-bottom:none;cursor:help}.pikaday-white{--backgroundColor: #ffffff;--textColor: #718096;--currentDateTextColor: #3182ce;--selectedDateBackgroundColor: #3182ce;--selectedDateTextColor: #ffffff;--labelTextColor: #4a5568;--weekDaysTextColor: #a0aec0;font-family:inherit;background-color:var(--backgroundColor);padding:.5rem;z-index:2000;margin:6px 0 0;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:.5rem}.pikaday-white .pika-title{width:100%;text-align:center;display:flex;justify-content:flex-start;margin-bottom:5px}.pikaday-white .pika-prev,.pikaday-white .pika-next{position:absolute;outline:none;padding:0;width:26px;height:26px;top:-1px;display:inline-block;margin-top:0;cursor:pointer;text-indent:-9999px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;opacity:.7}.pikaday-white .pika-prev:hover,.pikaday-white .pika-next:hover{opacity:1}.pikaday-white .pika-prev{right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E")}.pikaday-white .pika-next{right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E")}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pikaday-white .pika-label{margin-right:.375rem;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));padding:.25rem .5rem;font-size:14px;font-weight:500;line-height:1}.pikaday-white .pika-label{position:relative}.pikaday-white .pika-select-month,.pikaday-white .pika-select-year{width:100%;cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:0;opacity:0;padding:0}.pikaday-white table{width:100%;border-collapse:collapse}.pikaday-white table th{width:2em;height:2em;font-weight:400;color:var(--weekDaysTextColor);text-align:center}.pikaday-white table th abbr{text-decoration:none}.pikaday-white table td{padding:1px}.pikaday-white table td button{width:2em;height:2em;text-align:center;border-radius:9999px;background-color:var(--backgroundColor)}.pikaday-white table td button:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.pikaday-white table td.is-today button{color:var(--currentDateTextColor)}.pikaday-white table td.is-selected button{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-weight:400}.pikaday-white table td button{color:var(--textColor)}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}
package/dist/tailwindcss/index.js CHANGED
@@ -1,43 +1,271 @@
1
1
  const plugin = require('tailwindcss/plugin');
2
2
 
3
3
  module.exports = plugin(
4
- function () {
5
- //
4
+ function ({ addComponents, theme }) {
5
+ addComponents({
6
+ '.btn': {
7
+ position: 'relative',
8
+ display: 'inline-block',
9
+ cursor: 'pointer',
10
+ 'user-select': 'none',
11
+ color: theme('colors.slate.600'),
12
+ 'background-color': theme('colors.white'),
13
+ 'border-color': theme('colors.slate.300'),
14
+ 'border-width': '1px',
15
+ 'border-radius': theme('borderRadius.md'),
16
+ padding: theme('spacing.[2.5]') + ' ' + theme('spacing.4'),
17
+ 'text-align': 'center',
18
+ 'font-size': theme('fontSize.sm'),
19
+ 'line-height': theme('lineHeight.5'),
20
+ 'transition-property':
21
+ 'color, background-color, border-color, text-decoration-color, fill, stroke',
22
+ 'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
23
+ 'transition-duration': '100ms',
24
+ '&:enabled:hover': {
25
+ 'background-color': theme('colors.slate.100'),
26
+ },
27
+ '&:focus': {
28
+ outline: '2px solid transparent',
29
+ 'outline-offset': '2px',
30
+ '--tw-ring-color': theme('colors.primary.500'),
31
+ '--tw-ring-offset-width': '2px',
32
+ '--tw-ring-offset-shadow':
33
+ 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
34
+ '--tw-ring-shadow':
35
+ 'var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
36
+ 'box-shadow':
37
+ 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
38
+ },
39
+ '&:disabled': {
40
+ cursor: 'not-allowed',
41
+ opacity: '0.5',
42
+ },
43
+ },
44
+ // Sizes
45
+ '.btn-xs': {
46
+ 'font-size': theme('fontSize.xs'),
47
+ 'line-height': theme('lineHeight.4'),
48
+ padding: theme('spacing.1') + ' ' + theme('spacing.2'),
49
+ },
50
+ '.btn-sm': {
51
+ 'font-size': theme('fontSize.sm'),
52
+ 'line-height': theme('lineHeight.4'),
53
+ padding: theme('spacing.2') + ' ' + theme('spacing.3'),
54
+ },
55
+ '.btn-md': {
56
+ 'font-size': theme('fontSize.sm'),
57
+ 'line-height': theme('lineHeight.5'),
58
+ padding: theme('spacing.[2.5]') + ' ' + theme('spacing.4'),
59
+ },
60
+ '.btn-lg': {
61
+ 'font-size': theme('fontSize.base'),
62
+ 'line-height': theme('lineHeight.5'),
63
+ padding: theme('spacing.3') + ' ' + theme('spacing.5'),
64
+ },
65
+ '.btn-xl': {
66
+ 'font-size': theme('fontSize.base'),
67
+ 'line-height': theme('lineHeight.5'),
68
+ padding: theme('spacing.4') + ' ' + theme('spacing.6'),
69
+ },
70
+ // Colors
71
+ '.btn-primary': {
72
+ color: theme('colors.white'),
73
+ 'background-color': theme('colors.primary.500'),
74
+ 'border-color': 'transparent',
75
+ '&:enabled:hover': {
76
+ 'background-color': theme('colors.primary.400'),
77
+ },
78
+ '&:focus': {
79
+ '--tw-ring-color': theme('colors.primary.500'),
80
+ },
81
+ },
82
+ '.btn-secondary': {
83
+ color: theme('colors.primary.700'),
84
+ 'background-color': theme('colors.primary.200'),
85
+ 'border-color': 'transparent',
86
+ '&:enabled:hover': {
87
+ 'background-color': theme('colors.primary.100'),
88
+ },
89
+ '&:focus': {
90
+ '--tw-ring-color': theme('colors.primary.500'),
91
+ },
92
+ },
93
+ '.btn-secondary-outline': {
94
+ color: theme('colors.primary.700'),
95
+ 'background-color': theme('colors.primary.200'),
96
+ 'border-color': theme('colors.primary.300'),
97
+ '&:enabled:hover': {
98
+ 'background-color': theme('colors.primary.100'),
99
+ },
100
+ '&:focus': {
101
+ '--tw-ring-color': theme('colors.primary.500'),
102
+ },
103
+ },
104
+ '.btn-success': {
105
+ color: theme('colors.white'),
106
+ 'background-color': theme('colors.green.600'),
107
+ 'border-color': 'transparent',
108
+ '&:enabled:hover': {
109
+ 'background-color': theme('colors.green.500'),
110
+ },
111
+ '&:focus': {
112
+ '--tw-ring-color': theme('colors.green.500'),
113
+ },
114
+ },
115
+ '.btn-success-outline': {
116
+ color: theme('colors.green.700'),
117
+ 'background-color': theme('colors.green.200'),
118
+ 'border-color': theme('colors.green.300'),
119
+ '&:enabled:hover': {
120
+ 'background-color': theme('colors.green.100'),
121
+ },
122
+ '&:focus': {
123
+ '--tw-ring-color': theme('colors.green.500'),
124
+ },
125
+ },
126
+ '.btn-warning': {
127
+ color: theme('colors.yellow.900'),
128
+ 'background-color': theme('colors.yellow.400'),
129
+ 'border-color': 'transparent',
130
+ '&:enabled:hover': {
131
+ 'background-color': theme('colors.yellow.300'),
132
+ },
133
+ '&:focus': {
134
+ '--tw-ring-color': theme('colors.yellow.300'),
135
+ },
136
+ },
137
+ '.btn-warning-outline': {
138
+ color: theme('colors.yellow.900'),
139
+ 'background-color': theme('colors.yellow.200'),
140
+ 'border-color': theme('colors.yellow.400'),
141
+ '&:enabled:hover': {
142
+ 'background-color': theme('colors.yellow.100'),
143
+ },
144
+ '&:focus': {
145
+ '--tw-ring-color': theme('colors.yellow.300'),
146
+ },
147
+ },
148
+ '.btn-danger': {
149
+ color: theme('colors.white'),
150
+ 'background-color': theme('colors.red.600'),
151
+ 'border-color': 'transparent',
152
+ '&:enabled:hover': {
153
+ 'background-color': theme('colors.red.500'),
154
+ },
155
+ '&:focus': {
156
+ '--tw-ring-color': theme('colors.red.500'),
157
+ },
158
+ },
159
+ '.btn-danger-outline': {
160
+ color: theme('colors.red.700'),
161
+ 'background-color': theme('colors.red.200'),
162
+ 'border-color': theme('colors.red.300'),
163
+ '&:enabled:hover': {
164
+ 'background-color': theme('colors.red.100'),
165
+ },
166
+ '&:focus': {
167
+ '--tw-ring-color': theme('colors.red.500'),
168
+ },
169
+ },
170
+ '.btn-white': {
171
+ 'background-color': theme('colors.white'),
172
+ 'border-color': 'transparent',
173
+ '&:enabled:hover': {
174
+ 'background-color': theme('colors.slate.100'),
175
+ },
176
+ '&:focus': {
177
+ '--tw-ring-color': theme('colors.slate.200'),
178
+ },
179
+ },
180
+ '.btn-black': {
181
+ color: theme('colors.white'),
182
+ 'background-color': theme('colors.slate.900'),
183
+ 'border-color': 'transparent',
184
+ '&:enabled:hover': {
185
+ 'background-color': theme('colors.slate.700'),
186
+ },
187
+ '&:focus': {
188
+ '--tw-ring-color': theme('colors.slate.600'),
189
+ },
190
+ },
191
+ '.btn-slate-100': {
192
+ 'background-color': theme('colors.slate.100'),
193
+ 'border-color': 'transparent',
194
+ '&:enabled:hover': {
195
+ 'background-color': theme('colors.slate.50'),
196
+ },
197
+ '&:focus': {
198
+ '--tw-ring-color': theme('colors.slate.200'),
199
+ },
200
+ },
201
+ '.btn-slate-100-outline': {
202
+ 'background-color': theme('colors.slate.100'),
203
+ 'border-color': theme('colors.slate.200'),
204
+ '&:enabled:hover': {
205
+ 'background-color': theme('colors.slate.50'),
206
+ },
207
+ '&:focus': {
208
+ '--tw-ring-color': theme('colors.slate.200'),
209
+ },
210
+ },
211
+ '.btn-slate-200': {
212
+ 'background-color': theme('colors.slate.200'),
213
+ 'border-color': 'transparent',
214
+ '&:enabled:hover': {
215
+ 'background-color': theme('colors.slate.100'),
216
+ },
217
+ '&:focus': {
218
+ '--tw-ring-color': theme('colors.slate.200'),
219
+ },
220
+ },
221
+ '.btn-slate-200-outline': {
222
+ 'background-color': theme('colors.slate.200'),
223
+ 'border-color': theme('colors.slate.300'),
224
+ '&:enabled:hover': {
225
+ 'background-color': theme('colors.slate.100'),
226
+ },
227
+ '&:focus': {
228
+ '--tw-ring-color': theme('colors.slate.200'),
229
+ },
230
+ },
231
+ });
6
232
  },
7
233
  {
8
234
  theme: {
9
- zIndex: {
10
- status: '20',
11
- menu: '30',
12
- modal: '40',
13
- notifications: '50',
14
- loading: '100',
15
- },
16
- animation: {
17
- shake: 'shake 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both',
18
- shimmer: 'shimmer 2s infinite both',
19
- },
20
- keyframes: {
21
- shimmer: {
22
- '100%': {
23
- transform: 'translateX(100%)',
24
- },
235
+ extend: {
236
+ zIndex: {
237
+ status: '20',
238
+ menu: '30',
239
+ modal: '40',
240
+ notifications: '50',
241
+ loading: '100',
25
242
  },
26
- shake: {
27
- '0%, 100%': {
28
- transform: 'translateX(0)',
29
- },
30
- '10%, 30%, 50%, 70%': {
31
- transform: 'translateX(-10px)',
32
- },
33
- '20%, 40%, 60%': {
34
- transform: 'translateX(10px)',
35
- },
36
- '80%': {
37
- transform: 'translateX(8px)',
243
+ animation: {
244
+ shake: 'shake 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both',
245
+ shimmer: 'shimmer 2s infinite both',
246
+ },
247
+ keyframes: {
248
+ shimmer: {
249
+ '100%': {
250
+ transform: 'translateX(100%)',
251
+ },
38
252
  },
39
- '90%': {
40
- transform: 'translateX(-8px)',
253
+ shake: {
254
+ '0%, 100%': {
255
+ transform: 'translateX(0)',
256
+ },
257
+ '10%, 30%, 50%, 70%': {
258
+ transform: 'translateX(-10px)',
259
+ },
260
+ '20%, 40%, 60%': {
261
+ transform: 'translateX(10px)',
262
+ },
263
+ '80%': {
264
+ transform: 'translateX(8px)',
265
+ },
266
+ '90%': {
267
+ transform: 'translateX(-8px)',
268
+ },
41
269
  },
42
270
  },
43
271
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sprintify-ui",
3
- "version": "0.0.9",
3
+ "version": "0.0.10",
4
4
  "scripts": {
5
5
  "build": "rimraf dist && vue-tsc && vite build",
6
6
  "docs:dev": "vitepress dev docs",
package/src/assets/form.css CHANGED
@@ -1,13 +1,4 @@
1
-
2
- .form-input-label {
3
- @apply block text-sm leading-tight text-slate-600;
4
- }
5
-
6
- .form-input-error {
7
- @apply text-sm leading-tight text-red-600;
8
- }
9
-
10
- /** Placehoder color */
1
+ /** Placeholder color */
11
2
 
12
3
  input,
13
4
  textarea {
package/src/assets/main.css CHANGED
@@ -1,3 +1,2 @@
1
1
  @import './pikaday.css';
2
- @import './button.css';
3
2
  @import './form.css';
package/src/assets/tailwind.css CHANGED
@@ -1,5 +1,3 @@
1
- @import "tailwindcss/base";
2
-
3
- @import "tailwindcss/components";
4
-
5
- @import "tailwindcss/utilities";
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
package/src/components/BaseButton.stories.js CHANGED
@@ -5,8 +5,11 @@ const colors = [
5
5
  'btn-secondary',
6
6
  'btn-secondary-outline',
7
7
  'btn-success',
8
+ 'btn-success-outline',
8
9
  'btn-warning',
10
+ 'btn-warning-outline',
9
11
  'btn-danger',
12
+ 'btn-danger-outline',
10
13
  'btn-white',
11
14
  'btn-slate-100',
12
15
  'btn-slate-100-outline',
@@ -41,7 +44,7 @@ const Template = (args) => ({
41
44
 
42
45
  export const Demo = Template.bind({});
43
46
  Demo.args = {
44
- class: 'btn-primary btn-base',
47
+ class: '',
45
48
  };
46
49
 
47
50
  export const Loading = Template.bind({});
@@ -55,8 +58,13 @@ export const Colors = (args) => ({
55
58
  return { args, colors };
56
59
  },
57
60
  template: `
61
+ <p class="text-xs text-slate-600 leading-tight mb-1">btn</p>
62
+ <BaseButton class="btn">
63
+ Click here
64
+ </BaseButton>
65
+ <div class="mb-4"></div>
58
66
  <div v-for="color in colors" :key="color" class="mb-4">
59
- <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
67
+ <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ color }}</p>
60
68
  <BaseButton :class="color">
61
69
  Click here
62
70
  </BaseButton>
@@ -71,7 +79,7 @@ export const Sizes = (args) => ({
71
79
  },
72
80
  template: `
73
81
  <div v-for="size in sizes" :key="size" class="mb-4">
74
- <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
82
+ <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ size }}</p>
75
83
  <BaseButton class="btn-primary" :class="size">
76
84
  Click here
77
85
  </BaseButton>
package/src/assets/button.css DELETED
@@ -1,80 +0,0 @@
1
- .btn {
2
- @apply text-center relative inline-block cursor-pointer select-none rounded-md border px-4 py-2.5 text-sm transition-colors duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
3
- @apply btn-default;
4
- }
5
-
6
- .btn.btn-xs {
7
- @apply px-2 py-1 text-xs leading-4;
8
- }
9
-
10
- .btn.btn-sm {
11
- @apply px-3 py-2 text-sm leading-4;
12
- }
13
-
14
- .btn.btn-md {
15
- @apply px-4 py-2.5 text-sm;
16
- }
17
-
18
- .btn.btn-lg {
19
- @apply px-5 py-3 text-base;
20
- }
21
-
22
- .btn.btn-xl {
23
- @apply px-6 py-4 text-base;
24
- }
25
-
26
- .btn-default {
27
- @apply border-slate-300 bg-white text-slate-600 hover:bg-slate-100 focus-visible:ring-primary-500 disabled:hover:bg-white;
28
- }
29
-
30
- .btn.btn-primary {
31
- @apply border-transparent bg-primary-500 text-white hover:bg-primary-700 focus-visible:ring-primary-500 disabled:hover:bg-primary-500;
32
- }
33
-
34
- .btn.btn-secondary {
35
- @apply border-transparent bg-primary-200 text-primary-700 hover:bg-primary-100 focus-visible:ring-primary-500 disabled:hover:bg-primary-100;
36
- }
37
-
38
- .btn.btn-secondary-outline {
39
- @apply border-primary-400 bg-primary-200 text-primary-700 hover:bg-primary-100 focus-visible:ring-primary-500 disabled:hover:bg-primary-100;
40
- }
41
-
42
- .btn.btn-slate-100 {
43
- @apply border-transparent bg-slate-100 text-slate-700 hover:bg-slate-200 focus-visible:ring-slate-300 disabled:hover:bg-slate-50;
44
- }
45
-
46
- .btn.btn-slate-100-outline {
47
- @apply border-slate-200 bg-slate-100 text-slate-700 hover:bg-slate-50 focus-visible:ring-slate-300 disabled:hover:bg-slate-50;
48
- }
49
-
50
- .btn.btn-slate-200 {
51
- @apply border-transparent bg-slate-200 text-slate-800 hover:bg-slate-300 focus-visible:ring-slate-300 disabled:hover:bg-slate-50;
52
- }
53
-
54
- .btn.btn-slate-200-outline {
55
- @apply border-slate-300 bg-slate-200 text-slate-800 hover:bg-slate-300 focus-visible:ring-slate-300 disabled:hover:bg-slate-50;
56
- }
57
-
58
- .btn.btn-white {
59
- @apply border-transparent bg-white text-slate-600 hover:bg-slate-100 focus-visible:ring-primary-500 disabled:hover:bg-white;
60
- }
61
-
62
- .btn.btn-white-outline {
63
- @apply btn-default;
64
- }
65
-
66
- .btn.btn-white-outline-primary {
67
- @apply border-primary-400 bg-white text-primary-600 hover:bg-primary-100 focus-visible:ring-primary-500 disabled:hover:bg-white;
68
- }
69
-
70
- .btn.btn-black {
71
- @apply border-transparent bg-slate-900 text-white hover:bg-slate-800 focus-visible:ring-slate-900 disabled:hover:bg-slate-900;
72
- }
73
-
74
- .btn.btn-danger {
75
- @apply border-transparent bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-300 disabled:hover:bg-red-600;
76
- }
77
-
78
- .btn.btn-warning {
79
- @apply border-transparent bg-yellow-400 text-yellow-900 hover:bg-yellow-200 focus-visible:ring-yellow-300 disabled:hover:bg-yellow-300;
80
- }