@lunalytics/ui
Version:
React based component library created to be used in Lunalytics
2 lines (1 loc) • 3.58 kB
CSS
body{font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-medium);line-height:1.5;color:var(--lunaui-text-color);isolation:isolate}.luna-button{display:flex;justify-content:center;align-items:center;border-radius:.625rem;padding:.5rem 1rem;color:var(--lunaui-text-color);font-size:var(--lunaui-size-md);font-weight:600;cursor:pointer;border:.125rem solid var(--lunaui-accent-700);gap:.625rem;transition:all .25s ease-in-out;width:100%;text-decoration:none;--luna-button-background: var(--lunaui-gray-700);--luna-button-font: var(--lunaui-gray-700);--luna-button-border: var(--lunaui-gray-800)}.luna-button:hover{background-color:color-mix(in srgb,var(--luna-button-background),transparent 20%);color:var(--lunaui-text-color)}.luna-button.primary{--luna-button-background: var(--lunaui-primary-700);--luna-button-font: var(--lunaui-primary-700);--luna-button-border: var(--lunaui-primary-800)}.luna-button.red{--luna-button-background: var(--lunaui-red-700);--luna-button-font: var(--lunaui-red-700);--luna-button-border: var(--lunaui-red-800)}.luna-button.green{--luna-button-background: var(--lunaui-green-700);--luna-button-font: var(--lunaui-green-700);--luna-button-border: var(--lunaui-green-800)}.luna-button.yellow{--luna-button-background: var(--lunaui-yellow-700);--luna-button-font: var(--lunaui-yellow-700);--luna-button-border: var(--lunaui-yellow-800)}.luna-button.blue{--luna-button-background: var(--lunaui-blue-700);--luna-button-font: var(--lunaui-blue-700);--luna-button-border: var(--lunaui-blue-800)}.luna-button.purple{--luna-button-background: var(--lunaui-purple-700);--luna-button-font: var(--lunaui-purple-700);--luna-button-border: var(--lunaui-purple-800)}.luna-button.cyan{--luna-button-background: var(--lunaui-cyan-700);--luna-button-font: var(--lunaui-cyan-700);--luna-button-border: var(--lunaui-cyan-800)}.luna-button.gray{--luna-button-background: var(--lunaui-gray-700);--luna-button-font: var(--lunaui-white);--luna-button-border: var(--lunaui-gray-800)}.luna-button.pink{--luna-button-background: var(--lunaui-pink-700);--luna-button-font: var(--lunaui-pink-700);--luna-button-border: var(--lunaui-pink-800)}.luna-button.solid{color:var(--lunaui-text-color);background-color:var(--luna-button-background);border:.125rem solid var(--luna-button-border)}.luna-button.solid:hover{background-color:color-mix(in srgb,var(--luna-button-background),transparent 20%);color:var(--lunaui-text-color)}.luna-button.border{color:var(--luna-button-font);border:.125rem solid var(--luna-button-border)}.luna-button.border:hover{background-color:var(--luna-button-background);color:var(--lunaui-text-color)}.luna-button.light{color:var(--luna-button-font);border:.125rem solid var(--luna-button-border)}.luna-button.light:hover{background-color:color-mix(in srgb,var(--luna-button-background),transparent 66%)}.luna-button.flat{color:var(--luna-button-font);background-color:color-mix(in srgb,var(--luna-button-background),transparent 66%);border:.125rem solid var(--luna-button-border)}.luna-button.flat:hover{background-color:color-mix(in srgb,var(--luna-button-background),transparent 76%)}.luna-button.shadow{background-color:var(--luna-button-background);box-shadow:0 .125rem .3125rem var(--luna-button-background);border:none}.luna-button.shadow:hover{box-shadow:0 .25rem .75rem var(--luna-button-background)}.luna-button.theme-dark{color:var(--lunaui-text-dark-font)}.luna-button.theme-light{color:var(--lunaui-white)}.luna-button-fixed-width{width:max-content}.luna-button-content{flex:1;display:flex;justify-content:center;align-items:center}