Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@warp-ds/css

Package Overview
Dependencies
Maintainers
7
Versions
180
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@warp-ds/css - npm Package Compare versions

Comparing version 1.7.0 to 1.7.1-next.1

11

component-classes/classes.js

@@ -5,9 +5,6 @@ import * as components from './index.js';

...new Set(
Object.values(components).map((e) =>
typeof e === 'object'
? Object.values(e).map((e) => e.split(/\s/))
: e.split(/\s/)
).flat(Infinity)
)
Object.values(components)
.map((e) => (typeof e === 'object' ? Object.values(e).map((e) => e.split(/\s/)) : e.split(/\s/)))
.flat(Infinity),
),
];

732

component-classes/index.d.ts
export namespace pageIndicator {
const wrapper: string;
const dot: string;
const inactive: string;
const active: string;
let wrapper: string;
let dot: string;
let inactive: string;
let active: string;
}
export namespace ribbon {
const base: string;
const info: string;
const success: string;
const warning: string;
const error: string;
const disabled: string;
const sponsored: string;
const neutral: string;
const roundedTopRightBottomLeft: string;
const roundedTopLeftBottomRight: string;
let base: string;
let info: string;
let success: string;
let warning: string;
let error: string;
let disabled: string;
let sponsored: string;
let neutral: string;
let roundedTopRightBottomLeft: string;
let roundedTopLeftBottomRight: string;
}
export namespace badge {
const base_1: string;
let base_1: string;
export { base_1 as base };
const neutral_1: string;
let neutral_1: string;
export { neutral_1 as neutral };
const info_1: string;
let info_1: string;
export { info_1 as info };
export const positive: string;
const warning_1: string;
export let positive: string;
let warning_1: string;
export { warning_1 as warning };
export const negative: string;
const disabled_1: string;
export let negative: string;
let disabled_1: string;
export { disabled_1 as disabled };
export const price: string;
export const notification: string;
export const positionBase: string;
export const positionTL: string;
export const positionTR: string;
export const positionBR: string;
export const positionBL: string;
export let price: string;
export let notification: string;
export let positionBase: string;
export let positionTL: string;
export let positionTR: string;
export let positionBR: string;
export let positionBL: string;
}
export namespace slider {
const wrapper_1: string;
let wrapper_1: string;
export { wrapper_1 as wrapper };
export const track: string;
export const trackDisabled: string;
export const activeTrack: string;
export const activeTrackDisabled: string;
export const thumb: string;
export const thumbEnabled: string;
export const thumbDisabled: string;
export let track: string;
export let trackDisabled: string;
export let activeTrack: string;
export let activeTrackDisabled: string;
export let thumb: string;
export let thumbEnabled: string;
export let thumbDisabled: string;
}
export namespace box {
export const box: string;
export const bleed: string;
const info_2: string;
export let box: string;
export let bleed: string;
let info_2: string;
export { info_2 as info };
const neutral_2: string;
let neutral_2: string;
export { neutral_2 as neutral };
export const bordered: string;
export const infoClickable: string;
export const neutralClickable: string;
export const borderedClickable: string;
export let bordered: string;
export let infoClickable: string;
export let neutralClickable: string;
export let borderedClickable: string;
}
export namespace pill {
const pill: string;
const button: string;
const suggestion: string;
const filter: string;
const label: string;
const labelWithoutClose: string;
const labelWithClose: string;
const close: string;
const a11y: string;
let pill: string;
let button: string;
let suggestion: string;
let filter: string;
let label: string;
let labelWithoutClose: string;
let labelWithClose: string;
let close: string;
let a11y: string;
}
export namespace step {
const step: string;
const stepVertical: string;
const stepVerticalLeft: string;
const stepVerticalRight: string;
const stepHorizontal: string;
const stepDot: string;
const stepDotVerticalRight: string;
const stepDotHorizontal: string;
const stepDotActive: string;
const stepDotIncomplete: string;
const stepLine: string;
const stepLineVertical: string;
const stepLineVerticalRight: string;
const stepLineHorizontal: string;
const stepLineHorizontalRight: string;
const stepLineHorizontalLeft: string;
const stepLineIncomplete: string;
const stepLineComplete: string;
const content: string;
const contentVertical: string;
const contentHorizontal: string;
let step: string;
let stepVertical: string;
let stepVerticalLeft: string;
let stepVerticalRight: string;
let stepHorizontal: string;
let stepDot: string;
let stepDotVerticalRight: string;
let stepDotHorizontal: string;
let stepDotActive: string;
let stepDotIncomplete: string;
let stepLine: string;
let stepLineVertical: string;
let stepLineVerticalRight: string;
let stepLineHorizontal: string;
let stepLineHorizontalRight: string;
let stepLineHorizontalLeft: string;
let stepLineIncomplete: string;
let stepLineComplete: string;
let content: string;
let contentVertical: string;
let contentHorizontal: string;
}
export namespace steps {
const steps: string;
const stepsHorizontal: string;
let steps: string;
let stepsHorizontal: string;
}
export namespace card {
export const card: string;
export const cardShadow: string;
export const cardFlat: string;
export const cardFlatUnselected: string;
export const cardFlatSelected: string;
export const cardUnselected: string;
export const cardSelected: string;
export const cardOutline: string;
export const cardOutlineUnselected: string;
export const cardOutlineSelected: string;
const a11y_1: string;
export let card: string;
export let cardShadow: string;
export let cardFlat: string;
export let cardFlatUnselected: string;
export let cardFlatSelected: string;
export let cardUnselected: string;
export let cardSelected: string;
export let cardOutline: string;
export let cardOutlineUnselected: string;
export let cardOutlineSelected: string;
let a11y_1: string;
export { a11y_1 as a11y };
}
export namespace switchToggle {
const _switch: string;
let _switch: string;
export { _switch as switch };
const label_1: string;
let label_1: string;
export { label_1 as label };
export const labelDisabled: string;
const track_1: string;
export let labelDisabled: string;
let track_1: string;
export { track_1 as track };
export const trackActive: string;
export const trackInactive: string;
const trackDisabled_1: string;
export let trackActive: string;
export let trackInactive: string;
let trackDisabled_1: string;
export { trackDisabled_1 as trackDisabled };
export const handle: string;
export const handleSelected: string;
export const handleNotDisabled: string;
export const handleDisabled: string;
const a11y_2: string;
export let handle: string;
export let handleSelected: string;
export let handleNotDisabled: string;
export let handleDisabled: string;
let a11y_2: string;
export { a11y_2 as a11y };
}
export namespace toaster {
export const container: string;
const content_1: string;
export let container: string;
let content_1: string;
export { content_1 as content };
export const toaster: string;
export let toaster: string;
}
export namespace toast {
const wrapper_2: string;
let wrapper_2: string;
export { wrapper_2 as wrapper };
export const toast: string;
const positive_1: string;
export let toast: string;
let positive_1: string;
export { positive_1 as positive };
const warning_2: string;
let warning_2: string;
export { warning_2 as warning };
const negative_1: string;
let negative_1: string;
export { negative_1 as negative };
export const icon: string;
export const iconPositive: string;
export const iconWarning: string;
export const iconNegative: string;
export const iconLoading: string;
const content_2: string;
export let icon: string;
export let iconPositive: string;
export let iconWarning: string;
export let iconNegative: string;
export let iconLoading: string;
let content_2: string;
export { content_2 as content };
const close_1: string;
let close_1: string;
export { close_1 as close };
}
export namespace tabs {
const tabContainer: string;
const wunderbar: string;
const wrapperUnderlined: string;
let tabContainer: string;
let wunderbar: string;
let wrapperUnderlined: string;
}
export namespace tab {
export const tab: string;
export const tabActive: string;
const icon_1: string;
export let tab: string;
export let tabActive: string;
let icon_1: string;
export { icon_1 as icon };
export const iconUnderlinedActive: string;
const content_3: string;
export let iconUnderlinedActive: string;
let content_3: string;
export { content_3 as content };
export const contentUnderlined: string;
export const contentUnderlinedActive: string;
export let contentUnderlined: string;
export let contentUnderlinedActive: string;
}
export namespace gridLayout {
const cols1: string;
const cols2: string;
const cols3: string;
const cols4: string;
const cols5: string;
const cols6: string;
const cols7: string;
const cols8: string;
const cols9: string;
let cols1: string;
let cols2: string;
let cols3: string;
let cols4: string;
let cols5: string;
let cols6: string;
let cols7: string;
let cols8: string;
let cols9: string;
}
export const buttonReset: "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
export namespace expandable {
export const expandable: string;
export const expandableTitle: string;
export const expandableBox: string;
export let expandable: string;
export let expandableTitle: string;
export let expandableBox: string;
import expandableBleed = box.bleed;
export { expandableBleed };
export const chevron: string;
export const chevronNonBox: string;
export const chevronBox: string;
export const chevronTransform: string;
export const chevronExpand: string;
export const chevronCollapse: string;
export const elementsTransformChevronDownPart: string;
export const elementsChevronDownExpandPart: string;
export const elementsTransformChevronUpPart: string;
export const elementsChevronUpCollapsePart: string;
export const expansion: string;
export const expansionNotExpanded: string;
const button_1: string;
export let chevron: string;
export let chevronNonBox: string;
export let chevronBox: string;
export let chevronTransform: string;
export let chevronExpand: string;
export let chevronCollapse: string;
export let elementsTransformChevronDownPart: string;
export let elementsChevronDownExpandPart: string;
export let elementsTransformChevronUpPart: string;
export let elementsChevronUpCollapsePart: string;
export let expansion: string;
export let expansionNotExpanded: string;
let button_1: string;
export { button_1 as button };
export const buttonBox: string;
export const paddingTop: string;
export const title: string;
export const titleType: string;
export let buttonBox: string;
export let paddingTop: string;
export let title: string;
export let titleType: string;
}
export namespace button {
export const secondary: string;
export const secondaryHref: string;
export const secondaryDisabled: string;
export const secondarySmall: string;
export const secondarySmallDisabled: string;
export const secondaryQuiet: string;
export const secondaryQuietDisabled: string;
export const secondarySmallQuiet: string;
export const secondarySmallQuietDisabled: string;
export const secondaryLoading: string;
export const secondarySmallLoading: string;
export const secondarySmallQuietLoading: string;
export const secondaryQuietLoading: string;
export const primary: string;
export const primaryDisabled: string;
export const primarySmall: string;
export const primarySmallDisabled: string;
export const primaryQuiet: string;
export const primaryQuietDisabled: string;
export const primarySmallQuiet: string;
export const primarySmallQuietDisabled: string;
export const primaryLoading: string;
export const primarySmallLoading: string;
export const primarySmallQuietLoading: string;
export const primaryQuietLoading: string;
export const utility: string;
export const utilityDisabled: string;
export const utilityQuiet: string;
export const utilityQuietDisabled: string;
export const utilitySmall: string;
export const utilitySmallDisabled: string;
export const utilitySmallQuiet: string;
export const utilitySmallQuietDisabled: string;
export const utilityLoading: string;
export const utilitySmallLoading: string;
export const utilityQuietLoading: string;
export const utilitySmallQuietLoading: string;
const negative_2: string;
export let secondary: string;
export let secondaryHref: string;
export let secondaryDisabled: string;
export let secondarySmall: string;
export let secondarySmallDisabled: string;
export let secondaryQuiet: string;
export let secondaryQuietDisabled: string;
export let secondarySmallQuiet: string;
export let secondarySmallQuietDisabled: string;
export let secondaryLoading: string;
export let secondarySmallLoading: string;
export let secondarySmallQuietLoading: string;
export let secondaryQuietLoading: string;
export let primary: string;
export let primaryDisabled: string;
export let primarySmall: string;
export let primarySmallDisabled: string;
export let primaryQuiet: string;
export let primaryQuietDisabled: string;
export let primarySmallQuiet: string;
export let primarySmallQuietDisabled: string;
export let primaryLoading: string;
export let primarySmallLoading: string;
export let primarySmallQuietLoading: string;
export let primaryQuietLoading: string;
export let utility: string;
export let utilityDisabled: string;
export let utilityQuiet: string;
export let utilityQuietDisabled: string;
export let utilitySmall: string;
export let utilitySmallDisabled: string;
export let utilitySmallQuiet: string;
export let utilitySmallQuietDisabled: string;
export let utilityLoading: string;
export let utilitySmallLoading: string;
export let utilityQuietLoading: string;
export let utilitySmallQuietLoading: string;
let negative_2: string;
export { negative_2 as negative };
export const negativeDisabled: string;
export const negativeQuiet: string;
export const negativeQuietDisabled: string;
export const negativeSmall: string;
export const negativeSmallDisabled: string;
export const negativeSmallQuiet: string;
export const negativeSmallQuietDisabled: string;
export const negativeLoading: string;
export const negativeSmallLoading: string;
export const negativeQuietLoading: string;
export const negativeSmallQuietLoading: string;
const pill_1: string;
export let negativeDisabled: string;
export let negativeQuiet: string;
export let negativeQuietDisabled: string;
export let negativeSmall: string;
export let negativeSmallDisabled: string;
export let negativeSmallQuiet: string;
export let negativeSmallQuietDisabled: string;
export let negativeLoading: string;
export let negativeSmallLoading: string;
export let negativeQuietLoading: string;
export let negativeSmallQuietLoading: string;
let pill_1: string;
export { pill_1 as pill };
export const pillSmall: string;
export const pillLoading: string;
export const pillSmallLoading: string;
export const link: string;
export const linkSmall: string;
export const linkAsButton: string;
const a11y_3: string;
export let pillSmall: string;
export let pillLoading: string;
export let pillSmallLoading: string;
export let link: string;
export let linkSmall: string;
export let linkAsButton: string;
let a11y_3: string;
export { a11y_3 as a11y };
export const fullWidth: string;
export const contentWidth: string;
export let fullWidth: string;
export let contentWidth: string;
}
export namespace buttonGroup {
const wrapper_3: string;
let wrapper_3: string;
export { wrapper_3 as wrapper };
export const raised: string;
export const vertical: string;
export const nonOutlinedVertical: string;
export const nonOutlinedHorizontal: string;
export let raised: string;
export let vertical: string;
export let nonOutlinedVertical: string;
export let nonOutlinedHorizontal: string;
}
export namespace buttonGroupItem {
const wrapper_4: string;
let wrapper_4: string;
export { wrapper_4 as wrapper };
export const outlined: string;
export const outlinedVertical: string;
export const outlinedHorizontal: string;
export const outlinedVerticalResets: string;
export const outlinedHorizontalResets: string;
export const outlinedSelected: string;
export const selected: string;
export let outlined: string;
export let outlinedVertical: string;
export let outlinedHorizontal: string;
export let outlinedVerticalResets: string;
export let outlinedHorizontalResets: string;
export let outlinedSelected: string;
export let selected: string;
}
export namespace modal {
export const transparentBg: string;
export const backdrop: string;
export const modal: string;
const content_4: string;
export let transparentBg: string;
export let backdrop: string;
export let modal: string;
let content_4: string;
export { content_4 as content };
export const footer: string;
export const transitionTitle: string;
export const transitionTitleCenter: string;
export const transitionTitleColSpan: string;
const title_1: string;
export let footer: string;
export let transitionTitle: string;
export let transitionTitleCenter: string;
export let transitionTitleColSpan: string;
let title_1: string;
export { title_1 as title };
export const titleText: string;
export const titleButton: string;
export const titleButtonLeft: string;
export const titleButtonRight: string;
export const titleButtonIcon: string;
export const titleButtonIconRotated: string;
export let titleText: string;
export let titleButton: string;
export let titleButtonLeft: string;
export let titleButtonRight: string;
export let titleButtonIcon: string;
export let titleButtonIconRotated: string;
}
export namespace alert {
export const alert: string;
export const willChangeHeight: string;
export const textWrapper: string;
const title_2: string;
export let alert: string;
export let willChangeHeight: string;
export let textWrapper: string;
let title_2: string;
export { title_2 as title };
const icon_2: string;
let icon_2: string;
export { icon_2 as icon };
const negative_3: string;
let negative_3: string;
export { negative_3 as negative };
export const negativeIcon: string;
const positive_2: string;
export let negativeIcon: string;
let positive_2: string;
export { positive_2 as positive };
export const positiveIcon: string;
const warning_3: string;
export let positiveIcon: string;
let warning_3: string;
export { warning_3 as warning };
export const warningIcon: string;
const info_3: string;
export let warningIcon: string;
let info_3: string;
export { info_3 as info };
export const infoIcon: string;
export let infoIcon: string;
}
export namespace input {
const _default: string;
let _default: string;
export { _default as default };
export const textArea: string;
const disabled_2: string;
export let textArea: string;
let disabled_2: string;
export { disabled_2 as disabled };
export const invalid: string;
export const readOnly: string;
export const placeholder: string;
const wrapper_5: string;
export let invalid: string;
export let readOnly: string;
export let placeholder: string;
let wrapper_5: string;
export { wrapper_5 as wrapper };
export const suffix: string;
export const prefix: string;
export let suffix: string;
export let prefix: string;
}
export namespace select {
const _default_1: string;
let _default_1: string;
export { _default_1 as default };
const disabled_3: string;
let disabled_3: string;
export { disabled_3 as disabled };
const invalid_1: string;
let invalid_1: string;
export { invalid_1 as invalid };
const readOnly_1: string;
let readOnly_1: string;
export { readOnly_1 as readOnly };
const wrapper_6: string;
let wrapper_6: string;
export { wrapper_6 as wrapper };
export const selectWrapper: string;
const chevron_1: string;
export let selectWrapper: string;
let chevron_1: string;
export { chevron_1 as chevron };
export const chevronDisabled: string;
export let chevronDisabled: string;
}
export namespace label {
const label_2: string;
let label_2: string;
export { label_2 as label };
export const labelInvalid: string;
export const optional: string;
export let labelInvalid: string;
export let optional: string;
}
export namespace helpText {
const helpText: string;
const helpTextValid: string;
const helpTextInvalid: string;
let helpText: string;
let helpTextValid: string;
let helpTextInvalid: string;
}
export namespace suffix {
const wrapper_7: string;
let wrapper_7: string;
export { wrapper_7 as wrapper };
export const wrapperWithLabel: string;
export const wrapperWithIcon: string;
const label_3: string;
export let wrapperWithLabel: string;
export let wrapperWithIcon: string;
let label_3: string;
export { label_3 as label };
}
export namespace prefix {
const wrapper_8: string;
let wrapper_8: string;
export { wrapper_8 as wrapper };
const wrapperWithLabel_1: string;
let wrapperWithLabel_1: string;
export { wrapperWithLabel_1 as wrapperWithLabel };
const wrapperWithIcon_1: string;
let wrapperWithIcon_1: string;
export { wrapperWithIcon_1 as wrapperWithIcon };
const label_4: string;
let label_4: string;
export { label_4 as label };
}
export namespace breadcrumbs {
const wrapper_9: string;
let wrapper_9: string;
export { wrapper_9 as wrapper };
export const text: string;
const link_1: string;
export let text: string;
let link_1: string;
export { link_1 as link };
export const separator: string;
const a11y_4: string;
export let separator: string;
let a11y_4: string;
export { a11y_4 as a11y };
}
export namespace toggle {
export const field: string;
const wrapper_10: string;
export let field: string;
let wrapper_10: string;
export { wrapper_10 as wrapper };
export const deadToggleWrapper: string;
export const input: string;
export const deadToggleInput: string;
export const inputDisabled: string;
export const focusable: string;
export const focusableWithin: string;
const label_5: string;
export let deadToggleWrapper: string;
export let input: string;
export let deadToggleInput: string;
export let inputDisabled: string;
export let focusable: string;
export let focusableWithin: string;
let label_5: string;
export { label_5 as label };
export const deadToggleLabel: string;
export const noContent: string;
export const indeterminate: string;
const labelDisabled_1: string;
export let deadToggleLabel: string;
export let noContent: string;
export let indeterminate: string;
let labelDisabled_1: string;
export { labelDisabled_1 as labelDisabled };
export const checkbox: string;
export const checkboxChecked: string;
export const checkboxInvalid: string;
export const checkboxDisabled: string;
export const labelCheckboxBorder: string;
export const radio: string;
export const radioChecked: string;
export const radioInvalid: string;
export const radioDisabled: string;
export const labelRadioBorder: string;
export const radioButtons: string;
export const radioButtonsGroup: string;
export const radioButtonsLabel: string;
export const radioButtonsJustified: string;
export const radioButtonsGroupJustified: string;
export const radioButtonsLabelSmall: string;
const icon_3: string;
export let checkbox: string;
export let checkboxChecked: string;
export let checkboxInvalid: string;
export let checkboxDisabled: string;
export let labelCheckboxBorder: string;
export let radio: string;
export let radioChecked: string;
export let radioInvalid: string;
export let radioDisabled: string;
export let labelRadioBorder: string;
export let radioButtons: string;
export let radioButtonsGroup: string;
export let radioButtonsLabel: string;
export let radioButtonsJustified: string;
export let radioButtonsGroupJustified: string;
export let radioButtonsLabelSmall: string;
let icon_3: string;
export { icon_3 as icon };
const a11y_5: string;
let a11y_5: string;
export { a11y_5 as a11y };
}
export namespace clickable {
export const toggle: string;
const label_6: string;
export let toggle: string;
let label_6: string;
export { label_6 as label };
export const buttonOrLink: string;
export const buttonOrLinkStretch: string;
export let buttonOrLink: string;
export let buttonOrLinkStretch: string;
}
export namespace combobox {
const wrapper_11: string;
let wrapper_11: string;
export { wrapper_11 as wrapper };
export const combobox: string;
export const textMatch: string;
export const listbox: string;
export const option: string;
export const optionSelected: string;
const a11y_6: string;
export let combobox: string;
export let textMatch: string;
export let listbox: string;
export let option: string;
export let optionSelected: string;
let a11y_6: string;
export { a11y_6 as a11y };
}
export namespace attention {
const base_2: string;
let base_2: string;
export { base_2 as base };
export const tooltip: string;
export const callout: string;
export const highlight: string;
export const popover: string;
export const arrowBase: string;
export const arrowDirectionLeft: string;
export const arrowDirectionRight: string;
export const arrowDirectionBottom: string;
export const arrowDirectionTop: string;
export const arrowTooltip: string;
export const arrowCallout: string;
export const arrowPopover: string;
export const arrowHighlight: string;
const content_5: string;
export let tooltip: string;
export let callout: string;
export let highlight: string;
export let popover: string;
export let arrowBase: string;
export let arrowDirectionLeft: string;
export let arrowDirectionRight: string;
export let arrowDirectionBottom: string;
export let arrowDirectionTop: string;
export let arrowTooltip: string;
export let arrowCallout: string;
export let arrowPopover: string;
export let arrowHighlight: string;
let content_5: string;
export { content_5 as content };
export const notCallout: string;
export const closeBtn: string;
export let notCallout: string;
export let closeBtn: string;
}
export namespace backwardsCompatibleClasses {
export const modalBackdrop: string;
const chevronBox_1: string;
export let modalBackdrop: string;
let chevronBox_1: string;
export { chevronBox_1 as chevronBox };
const chevronNonBox_1: string;
let chevronNonBox_1: string;
export { chevronNonBox_1 as chevronNonBox };
const checkboxInvalid_1: string;
let checkboxInvalid_1: string;
export { checkboxInvalid_1 as checkboxInvalid };
const radioInvalid_1: string;
let radioInvalid_1: string;
export { radioInvalid_1 as radioInvalid };
const radioDisabled_1: string;
let radioDisabled_1: string;
export { radioDisabled_1 as radioDisabled };
export const modalTitle: string;
export const pillClose: string;
export let modalTitle: string;
export let pillClose: string;
}
export namespace pagination {
export const currentPage: string;
const icon_4: string;
export let currentPage: string;
let icon_4: string;
export { icon_4 as icon };
export const containerNav: string;
export const heading: string;
export const pages: string;
export const nextPage: string;
export const firstPageButton: string;
export const firstPageLabel: string;
const active_1: string;
export let containerNav: string;
export let heading: string;
export let pages: string;
export let nextPage: string;
export let firstPageButton: string;
export let firstPageLabel: string;
let active_1: string;
export { active_1 as active };
export const defaultPage: string;
export let defaultPage: string;
}

144

component-classes/index.js

@@ -41,16 +41,9 @@ export const pageIndicator = {

wrapper: 'touch-pan-y relative w-full h-44 py-2',
track:
'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',
trackDisabled:
'pointer-events-none i-bg-$color-slider-track-background-disabled',
activeTrack:
'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',
activeTrackDisabled:
'i-bg-$color-slider-track-background-disabled pointer-events-none',
thumb:
'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',
thumbEnabled:
'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',
thumbDisabled:
'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',
track: 'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',
trackDisabled: 'pointer-events-none i-bg-$color-slider-track-background-disabled',
activeTrack: 'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',
activeTrackDisabled: 'i-bg-$color-slider-track-background-disabled pointer-events-none',
thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',
thumbEnabled: 'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',
thumbDisabled: 'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',
};

@@ -118,11 +111,7 @@

cardFlat: 'border-2 rounded-4',
cardFlatUnselected:
'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',
cardFlatSelected:
'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',
cardFlatUnselected: 'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',
cardFlatSelected: 'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',
cardUnselected: 's-bg',
cardSelected:
'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',
cardOutline:
'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',
cardSelected: 'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',
cardOutline: 'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',
cardOutlineUnselected: 'i-border-$color-card-border',

@@ -149,7 +138,5 @@ cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',

export const toaster = {
container:
'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
container: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
content: 'w-full',
toaster:
'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
toaster: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
};

@@ -159,4 +146,3 @@

wrapper: 'relative overflow-hidden w-full',
toast:
'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',
toast: 'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',
positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',

@@ -176,6 +162,4 @@ warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',

tabContainer: 'inline-grid relative',
wunderbar:
'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',
wrapperUnderlined:
'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',
wunderbar: 'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',
wrapperUnderlined: 'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',
};

@@ -206,4 +190,3 @@

export const buttonReset =
'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
export const buttonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';

@@ -255,4 +238,3 @@ export const expandable = {

negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
pill:
`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,

@@ -279,10 +261,7 @@ };

const buttonVariants = {
inProgress:
`border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited
quiet:
`border-0 rounded-8 ${buttonDefaultStyling}`,
inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited
quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
isDisabled:
`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled
isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled
};

@@ -292,22 +271,15 @@

// Buttontypes
secondary:
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button
secondaryHref:
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
secondaryDisabled:
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button
secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
secondaryQuiet:
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
secondaryQuietDisabled:
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
secondaryLoading:
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
secondaryQuietLoading:
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,

@@ -362,4 +334,4 @@ primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta

a11y: 'sr-only',
fullWidth: "w-full max-w-full",
contentWidth: "max-w-max",
fullWidth: 'w-full max-w-full',
contentWidth: 'max-w-max',
};

@@ -389,8 +361,5 @@

transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,
backdrop:
'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]',
modal:
'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',
content:
'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
backdrop: 'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]',
modal: 'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',
content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
footer: 'flex justify-end shrink-0 px-16 sm:px-32',

@@ -400,4 +369,3 @@ transitionTitle: 'transition-all duration-300',

transitionTitleColSpan: 'col-span-2',
title:
'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0',
title: 'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0',
titleText: 'mb-0 h4 sm:h3',

@@ -412,15 +380,15 @@ titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,

export const alert = {
alert: "flex p-16 border border-l-4 rounded-4",
willChangeHeight: "will-change-height",
textWrapper: "last-child:mb-0 text-s",
title: "text-s",
icon: "w-16 mr-8 min-w-16",
negative: "i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border",
negativeIcon: "i-text-$color-alert-negative-icon",
positive: "i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border",
positiveIcon: "i-text-$color-alert-positive-icon",
warning: "i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border",
warningIcon: "i-text-$color-alert-warning-icon",
info: "i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border",
infoIcon: "i-text-$color-alert-info-icon",
alert: 'flex p-16 border border-l-4 rounded-4',
willChangeHeight: 'will-change-height',
textWrapper: 'last-child:mb-0 text-s',
title: 'text-s',
icon: 'w-16 mr-8 min-w-16',
negative: 'i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border',
negativeIcon: 'i-text-$color-alert-negative-icon',
positive: 'i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border',
positiveIcon: 'i-text-$color-alert-positive-icon',
warning: 'i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border',
warningIcon: 'i-text-$color-alert-warning-icon',
info: 'i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border',
infoIcon: 'i-text-$color-alert-info-icon',
};

@@ -463,4 +431,3 @@

const prefixSuffixWrapperBase =
'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';
const prefixSuffixWrapperBase = 'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';

@@ -542,10 +509,7 @@ export const suffix = {

base: 'border-2 relative flex items-start',
tooltip:
'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',
tooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',
callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',
highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',
popover:
'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',
arrowBase:
'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
popover: 'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',
arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
arrowDirectionLeft: '-left-[8px]',

@@ -572,3 +536,3 @@ arrowDirectionRight: '-right-[8px]',

modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start
pillClose: 'pt-4 pb-6 text-m!' //replaced by py-8
pillClose: 'pt-4 pb-6 text-m!', //replaced by py-8
};

@@ -586,3 +550,3 @@

active: 's-bg-primary s-text-inverted',
defaultPage: 'hover:s-bg-primary-subtle-hover'
};
defaultPage: 'hover:s-bg-primary-subtle-hover',
};

4

component-classes/shortcuts.js
export const buttons = {
'button': 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',
button: 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',
'button--secondary': 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',

@@ -15,2 +15,2 @@ 'button--default': 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',

'button--flat': 'py-12 px-16 border-0! font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-quiet-background! i-text-$color-button-quiet-text! hover:i-bg-$color-button-quiet-background-hover! active:i-bg-$color-button-quiet-background-active!',
};
};

20

package.json
{
"name": "@warp-ds/css",
"repository": "git@github.com:warp-ds/css.git",
"version": "1.7.0",
"version": "1.7.1-next.1",
"scripts": {

@@ -44,3 +44,3 @@ "build": "pnpm build:tokens && pnpm build:resets && pnpm build:cc",

"@warp-ds/tokenizer": "^0.0.2",
"@warp-ds/uno": "^1.2.0"
"@warp-ds/uno": "^1.5.0"
},

@@ -53,12 +53,12 @@ "devDependencies": {

"cz-conventional-changelog": "^3.3.0",
"@warp-ds/eslint-config": "^0.0.1",
"eslint": "^8.43.0",
"@warp-ds/eslint-config": "^1.0.0",
"eslint": "^8.56.0",
"semantic-release": "^20.1.3",
"typescript": "^5.0.0",
"unocss": "^0.56.0",
"vite": "^4.3.9",
"vite-plugin-dts": "^3.0.0",
"@sindresorhus/slugify": "^2.2.0",
"typescript": "^5.3.3",
"unocss": "^0.58.3",
"vite": "^5.0.0",
"vite-plugin-dts": "^3.7.1",
"@sindresorhus/slugify": "^2.2.1",
"drnm": "^0.9.0",
"lightningcss": "^1.19.0"
"lightningcss": "^1.23.0"
},

@@ -65,0 +65,0 @@ "eslintConfig": {

dist/components.css

Sorry, the diff of this file is not supported yet

dist/index.html

Sorry, the diff of this file is not supported yet

dist/resets.css

Sorry, the diff of this file is not supported yet

dist/resets.min.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc