@scania/tegel-lite 0.0.1-beta.0

package/dist/tl-datetime.css

@@ -0,0 +1,413 @@
+.tl-datetime {
+  --datetime-background-primary: var(--color-background-layer-01);
+  --datetime-background-secondary: var(--color-background-layer-02);
+  --datetime-background: var(--datetime-background-primary);
+  --datetime-text: var(--color-foreground-text-strong);
+  --datetime-icon: var(--color-foreground-icon-strong);
+  --datetime-placeholder: var(--color-foreground-text-subtle);
+  --datetime-background-disabled-primary: var(--color-background-layer-01);
+  --datetime-background-disabled-secondary: var(--color-background-layer-02);
+  --datetime-background-disabled: var(--datetime-background-disabled-primary);
+  --datetime-text-disabled: var(--color-foreground-text-disabled);
+  --datetime-placeholder-disabled: var(--color-foreground-text-disabled);
+  --datetime-label-disabled: var(--color-foreground-text-disabled);
+  --datetime-icon-disabled: var(--color-foreground-text-disabled);
+  --datetime-label: var(--color-foreground-text-strong);
+  --datetime-label-inside: var(--color-foreground-text-strong);
+  --datetime-placeholder-focus: var(--tds-grey-500);
+  --datetime-highlight-bar: var(--color-foreground-border-accent-focus);
+  --datetime-helper: var(--color-foreground-text-defined);
+  --datetime-helper-error: var(--color-system-danger-default);
+  --datetime-icon-error: var(--color-system-danger-default);
+}
+.tl-datetime--primary {
+  --datetime-background: var(--datetime-background-primary);
+  --datetime-background-disabled: var(--datetime-background-disabled-primary);
+}
+.tl-datetime--secondary {
+  --datetime-background: var(--datetime-background-secondary);
+  --datetime-background-disabled: var(--datetime-background-disabled-secondary);
+}
+
+.tl-datetime,
+.scania .tl-datetime {
+  /* Datetime: units */
+  --datetime-border-radius: 4px 4px 0 0;
+  /* Datetime: box-shadow */
+  --datetime-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
+  --datetime-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
+  --datetime-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
+  --datetime-box-shadow-disabled: none;
+  --datetime-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
+  --datetime-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
+  --datetime-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
+  --datetime-highlight: var(--datetime-highlight-bar);
+  --datetime-highlight-error: var(--color-system-danger-default);
+  /* Datetime: border colors */
+  --datetime-border-color-left: transparent;
+  --datetime-border-color-right: transparent;
+  --datetime-border-color-bottom: var(--color-foreground-border-soft);
+  --datetime-border-color-top: transparent;
+  /* Datetime: border colors on hover */
+  --datetime-border-color-left-hover: transparent;
+  --datetime-border-color-right-hover: transparent;
+  --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
+  --datetime-border-color-top-hover: transparent;
+  /* Datetime: border colors on success */
+  --datetime-border-color-left-success: transparent;
+  --datetime-border-color-right-success: transparent;
+  --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
+  --datetime-border-color-top-success: transparent;
+  /* Datetime: border colors on focus */
+  --datetime-border-color-left-focus: transparent;
+  --datetime-border-color-right-focus: transparent;
+  --datetime-border-color-bottom-focus: var(--color-foreground-border-strong);
+  --datetime-border-color-top-focus: transparent;
+  --datetime-outline-color-focus: none;
+  /* Datetime: border colors on error */
+  --datetime-border-color-left-error: transparent;
+  --datetime-border-color-right-error: transparent;
+  --datetime-border-color-bottom-error: var(--color-system-danger-default);
+  --datetime-border-color-top-error: transparent;
+  /* Datetime: bar colors */
+  --datetime-bar-color-focus: var(--color-foreground-border-accent-focus);
+  --datetime-bar-color-error: var(--color-system-danger-default);
+  /* Datetime: disabled */
+  --datetime-disabled-bottom-bar: transparent;
+}
+
+.traton .tl-datetime {
+  /* Datetime: units */
+  --datetime-border-radius: 4px 4px 4px 4px;
+  /* Datetime: box-shadow */
+  --datetime-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
+  --datetime-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
+  --datetime-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
+  --datetime-box-shadow-disabled: none;
+  --datetime-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
+  --datetime-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
+  --datetime-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
+  --datetime-highlight: transparent;
+  --datetime-highlight-error: transparent;
+  /* Datetime: border colors */
+  --datetime-border-color-left: var(--color-foreground-border-soft);
+  --datetime-border-color-right: var(--color-foreground-border-soft);
+  --datetime-border-color-bottom: var(--color-foreground-border-soft);
+  --datetime-border-color-top: var(--color-foreground-border-soft);
+  /* Datetime: border colors on hover */
+  --datetime-border-color-left-hover: var(--color-foreground-border-strong);
+  --datetime-border-color-right-hover: var(--color-foreground-border-strong);
+  --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
+  --datetime-border-color-top-hover: var(--color-foreground-border-strong);
+  /* Datetime: border colors on success */
+  --datetime-border-color-left-success: var(--color-foreground-border-strong);
+  --datetime-border-color-right-success: var(--color-foreground-border-strong);
+  --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
+  --datetime-border-color-top-success: var(--color-foreground-border-strong);
+  /* Datetime: border colors on focus */
+  --datetime-border-color-left-focus: var(--color-foreground-border-accent-focus);
+  --datetime-border-color-right-focus: var(--color-foreground-border-accent-focus);
+  --datetime-border-color-bottom-focus: var(--color-foreground-border-accent-focus);
+  --datetime-border-color-top-focus: var(--color-foreground-border-accent-focus);
+  --datetime-outline-color-focus: var(--color-foreground-border-accent-focus);
+  /* Datetime: border colors on error */
+  --datetime-border-color-left-error: var(--color-system-danger-default);
+  --datetime-border-color-right-error: var(--color-system-danger-default);
+  --datetime-border-color-bottom-error: var(--color-system-danger-default);
+  --datetime-border-color-top-error: var(--color-system-danger-default);
+  /* Datetime: bar colors */
+  --datetime-bar-color-focus: transparent;
+  --datetime-bar-color-error: transparent;
+  /* Datetime: disabled */
+  --datetime-disabled-bottom-bar: none;
+}
+
+/* Typography Usage mixins */
+.tl-datetime {
+  display: block;
+  min-width: 208px;
+  background: unset;
+}
+.tl-datetime--no-min-width {
+  min-width: auto;
+}
+.tl-datetime {
+  /* Native picker visuals */
+}
+.tl-datetime input[type=datetime-local]::-webkit-inner-spin-button, .tl-datetime input[type=datetime-local]::-webkit-calendar-picker-indicator,
+.tl-datetime input[type=date]::-webkit-inner-spin-button,
+.tl-datetime input[type=date]::-webkit-calendar-picker-indicator,
+.tl-datetime input[type=month]::-webkit-inner-spin-button,
+.tl-datetime input[type=month]::-webkit-calendar-picker-indicator,
+.tl-datetime input[type=week]::-webkit-inner-spin-button,
+.tl-datetime input[type=week]::-webkit-calendar-picker-indicator,
+.tl-datetime input[type=time]::-webkit-inner-spin-button,
+.tl-datetime input[type=time]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
+.tl-datetime__label {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  display: block;
+  margin-bottom: var(--tds-spacing-element-8);
+  color: var(--datetime-label);
+}
+.tl-datetime:has(input:disabled) .tl-datetime__label {
+  color: var(--datetime-label-disabled);
+  cursor: not-allowed;
+}
+
+.tl-datetime__wrapper {
+  border-radius: var(--datetime-border-radius);
+  position: relative;
+  height: 56px;
+  box-sizing: border-box;
+  background-color: var(--datetime-background);
+}
+.tl-datetime--md .tl-datetime__wrapper {
+  height: 48px;
+}
+.tl-datetime--sm .tl-datetime__wrapper {
+  height: 40px;
+}
+.tl-datetime:has(input:disabled) .tl-datetime__wrapper {
+  cursor: not-allowed;
+}
+.tl-datetime__wrapper {
+  /* CSS-generated icon */
+}
+.tl-datetime__wrapper::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 18px;
+  width: 20px;
+  height: 20px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 20px 20px;
+  background-color: var(--datetime-icon);
+  pointer-events: none;
+  /* Default: calendar icon for date/datetime inputs */
+  mask-image: var(--icon-calendar-svg);
+  /* Firefox - hide our custom icon since Firefox shows its own */
+}
+@supports (-moz-appearance: none) {
+  .tl-datetime__wrapper::after {
+    display: none;
+  }
+}
+.tl-datetime__wrapper {
+  /* Change to clock icon for time input */
+}
+.tl-datetime__wrapper:has(input[type=time])::after {
+  mask-image: var(--icon-clock-svg);
+}
+.tl-datetime--error .tl-datetime__wrapper::after {
+  background-color: var(--datetime-icon-error);
+}
+.tl-datetime__wrapper {
+  /* Disabled state (should not override error state) */
+}
+.tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__wrapper::after {
+  background-color: var(--datetime-icon-disabled);
+}
+
+.tl-datetime__input {
+  box-sizing: border-box;
+}
+.tl-datetime__input * {
+  box-sizing: border-box;
+}
+.tl-datetime__input {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  border-radius: var(--datetime-border-radius);
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--datetime-text);
+  background-color: var(--datetime-background);
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+  box-shadow: inset var(--datetime-box-shadow);
+  transition: box-shadow 0.2s;
+}
+.tl-datetime__input:focus {
+  box-shadow: inset var(--datetime-box-shadow-focus);
+}
+.tl-datetime:hover .tl-datetime__input:not(:focus) {
+  box-shadow: inset var(--datetime-box-shadow-hover);
+}
+.tl-datetime--error .tl-datetime__input {
+  box-shadow: inset var(--datetime-box-shadow-error);
+}
+.tl-datetime--error .tl-datetime__input:focus {
+  box-shadow: inset var(--datetime-box-shadow-error-focus);
+}
+.tl-datetime--error:hover .tl-datetime__input:not(:focus) {
+  box-shadow: inset var(--datetime-box-shadow-error-hover);
+}
+.tl-datetime__input::placeholder {
+  opacity: 1;
+  color: var(--datetime-placeholder);
+}
+.tl-datetime__input:focus::placeholder {
+  color: var(--datetime-placeholder-focus);
+}
+.tl-datetime__input {
+  /* WebKit datetime fields */
+}
+.tl-datetime__input::-webkit-datetime-edit-text {
+  -webkit-text-fill-color: var(--datetime-text);
+}
+.tl-datetime__input::-webkit-datetime-edit-month-field {
+  -webkit-text-fill-color: var(--datetime-text);
+}
+.tl-datetime__input::-webkit-datetime-edit-day-field {
+  -webkit-text-fill-color: var(--datetime-text);
+}
+.tl-datetime__input::-webkit-datetime-edit-year-field {
+  -webkit-text-fill-color: var(--datetime-text);
+}
+.tl-datetime__input::-webkit-datetime-edit-hour-field {
+  -webkit-text-fill-color: var(--datetime-text);
+}
+.tl-datetime__input::-webkit-datetime-edit-minute-field {
+  -webkit-text-fill-color: var(--datetime-text);
+}
+.tl-datetime__input::-webkit-datetime-edit-second-field {
+  -webkit-text-fill-color: var(--datetime-text);
+}
+.tl-datetime__input::-webkit-datetime-edit-millisecond-field {
+  -webkit-text-fill-color: var(--datetime-text);
+}
+.tl-datetime__input::-webkit-datetime-edit-meridiem-field {
+  -webkit-text-fill-color: var(--datetime-text);
+}
+.tl-datetime__input:disabled {
+  background-color: var(--datetime-background-disabled);
+  color: var(--datetime-text-disabled);
+  box-shadow: inset var(--datetime-box-shadow-disabled);
+  cursor: not-allowed;
+}
+.tl-datetime__input:disabled::placeholder {
+  color: var(--datetime-placeholder-disabled);
+}
+.tl-datetime__input:disabled ~ .tl-datetime__label-inside {
+  color: var(--datetime-label-disabled);
+}
+.tl-datetime__input:disabled {
+  /* WebKit datetime fields - disabled state */
+}
+.tl-datetime__input:disabled::-webkit-datetime-edit-text {
+  -webkit-text-fill-color: var(--datetime-text-disabled);
+}
+.tl-datetime__input:disabled::-webkit-datetime-edit-month-field {
+  -webkit-text-fill-color: var(--datetime-text-disabled);
+}
+.tl-datetime__input:disabled::-webkit-datetime-edit-day-field {
+  -webkit-text-fill-color: var(--datetime-text-disabled);
+}
+.tl-datetime__input:disabled::-webkit-datetime-edit-year-field {
+  -webkit-text-fill-color: var(--datetime-text-disabled);
+}
+.tl-datetime__input:disabled::-webkit-datetime-edit-hour-field {
+  -webkit-text-fill-color: var(--datetime-text-disabled);
+}
+.tl-datetime__input:disabled::-webkit-datetime-edit-minute-field {
+  -webkit-text-fill-color: var(--datetime-text-disabled);
+}
+.tl-datetime__input:disabled::-webkit-datetime-edit-second-field {
+  -webkit-text-fill-color: var(--datetime-text-disabled);
+}
+.tl-datetime__input:disabled::-webkit-datetime-edit-millisecond-field {
+  -webkit-text-fill-color: var(--datetime-text-disabled);
+}
+.tl-datetime__input:disabled::-webkit-datetime-edit-meridiem-field {
+  -webkit-text-fill-color: var(--datetime-text-disabled);
+}
+.tl-datetime--label-inside .tl-datetime__input {
+  padding-top: var(--tds-spacing-element-24);
+  padding-bottom: 15px;
+}
+.tl-datetime--md.tl-datetime--label-inside .tl-datetime__input {
+  padding-top: var(--tds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.tl-datetime--sm .tl-datetime__input {
+  padding: var(--tds-spacing-element-16);
+}
+
+.tl-datetime__label-inside {
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
+  position: absolute;
+  pointer-events: none;
+  color: var(--datetime-label-inside);
+  left: 16px;
+  transition: 0.1s ease all;
+}
+.tl-datetime--lg .tl-datetime__label-inside {
+  top: 12px;
+}
+.tl-datetime--md .tl-datetime__label-inside {
+  top: 8px;
+}
+.tl-datetime--sm .tl-datetime__label-inside {
+  display: none;
+}
+
+.tl-datetime__helper {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  display: inline-flex;
+  gap: 8px;
+  padding-top: var(--tds-spacing-element-4);
+  color: var(--datetime-helper);
+  /* CSS-generated error icon */
+}
+.tl-datetime__helper::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  flex-shrink: 0;
+  display: none;
+}
+.tl-datetime--error .tl-datetime__helper {
+  color: var(--datetime-helper-error);
+}
+.tl-datetime--error .tl-datetime__helper::before {
+  display: inline-flex;
+  mask-image: var(--icon-error-svg);
+  background-color: var(--datetime-helper-error);
+}
+.tl-datetime__helper {
+  /* Disabled state (should not override error text/icon color) */
+}
+.tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__helper {
+  color: var(--color-foreground-text-disabled);
+}

package/dist/tl-divider.css

@@ -0,0 +1,29 @@
+.tl-divider {
+  --divider-background: var(--color-foreground-border-discrete);
+  --divider-background-strong: var(--color-foreground-border-strong);
+  --divider-background-discrete: var(--color-foreground-border-discrete);
+}
+
+.tl-divider {
+  box-sizing: border-box;
+}
+.tl-divider * {
+  box-sizing: border-box;
+}
+.tl-divider {
+  background-color: var(--divider-background);
+}
+.tl-divider--expressive {
+  background-color: var(--divider-background-strong);
+}
+.tl-divider--discrete {
+  background-color: var(--divider-background-discrete);
+}
+.tl-divider--horizontal {
+  width: 100%;
+  height: 1px;
+}
+.tl-divider--vertical {
+  height: 100%;
+  width: 1px;
+}